前言：
轉眼距離上一次寫博文又過去一個月了，今年的博文節奏已經徹底被打破了：
真的是有心無力了，其原因在之前也提到過，組織架構調整，各種考核（跨領域性質的考核）實行末尾淘汰制，說不出的酸楚，不過換個心态來講，通過這種公司的硬性考核打破了自己的舒适區，其實或多或少也開拓了自己的眼界，對自己也是一種提升吧，是以今年這塊的更新節奏就徹底“放棄”了，不過并非真正的放棄，這塊的筆記是自己成長的記憶，非常珍貴的财富，會活到老寫到老的，雞湯撒一撒，該進入正題了，這次依然是跟Java全棧相關的，對于去年在學的那些【flutter、rn、資料結構、ios...】待之後有時間再續更，總之，不會輕易就放棄啦。
scroll-view元件的靈活應用：
效果：
在上一次小程式進階電商前端第2周深入了解REST API開發規範 開啟三端分離程式設計之旅<一>----優惠券、函數式程式設計、重構Theme咱們已經對首頁的主題效果進行了實作，接下來咱們準備往下繼續，到它了：
其中它是可以左右滑動的：
說實話，對于微信小程式開發小白的我來說，這效果感覺好難，接下來則一點點來搞定它。
實作：
1、建立元件：
還是為了保證home頁面的wxml足夠的簡單，是以還是将整個這塊做成一個元件，是以元件的建立先回到"微信開發工具"來：
此時代碼編寫還是webstrom ide中：
2、 元件的屬性清單定義：
接下來則打開js檔案進行元件屬性的定義：
這裡首先需要一個主題，也就是：
其實也就是界面這塊需要用到的：
而在它下面可以滑動的則是theme對應的商品，它對應這個接口：
它的傳回資料格式如下：
"id":6,
"title":"時尚穿搭",
"description":"帥點才有女朋友",
"name":"t-4",
"extend":null,
"entrance_img":"",
"internal_top_img":"",
"online":true,
"title_img":null,
"tpl_name":"irelia",
"spu_list":[
{
"id":2,
"title":"Sleeve羊絨毛衣",
"subtitle":"Sleeve風袖說當季經典款",
"category_id":17,
"root_category_id":3,
"price":"77.00",
"img":"",
"for_theme_img":"",
"description":null,
"discount_price":"62.00",
"tags":"包郵$熱門",
"is_test":true,
"online":true,
}
]
} 其中提到了“Spu”這個詞，這塊之後會再專門學到，這裡先提前有個概念，通常會跟“SKU”一起了解，關于這倆詞的差別網上搜了下，這篇https://www.zhihu.com/question/29073730講得比較通俗了：
是以接下來則需要來定義這麼一個查詢接口。
3、定義擷取單個專題的詳情（含Spu資料）API：
此時API的定義就需要在這了：
而由于它是需要在home.js中來進行調用的，很顯然此時如果調用在外面還需要傳遞主題的name，而關于所有主題類型咱們都已經在theme.js當中了：
那，為了讓外層調用不關注這個參數的細節，最好是再封裝一個額外的方法，如下：
static修飾方法問題探讨：
在繼續往下進行編寫之前，需要探讨一個問題，就是咱們這次在定義方法時加了static，而之前在擷取主題相關資料時是木有加的：
關于加與不加其實就是調用方式的不同對吧【static是類調用，而非static是類的執行個體調用】，這塊就不過多說明了，其實衡量一個方法之前要不要加static，最最簡單的了解就是看此方法是不是需要保持資料的狀态【關于資料狀态這塊可以參考https://www.cnblogs.com/webor2006/p/13423338.html】，如果需要則不應該加static，反之則應該加static， 而回到咱們定義的這倆方法來說，其實是可以将static去掉的，為啥？因為在home.js中之前已經主動建立了Theme的執行個體了：
那很明顯直接通過執行個體來調用就可以了啦，糾結要不要static幹嘛，好，咱們現在将static關鍵字給去掉看下：
你會發現IDE可能會給出一個警告【貌似在我webstorm中木有提示，可能是我把警告關了】：
那。。是不是以後我們在撸碼時，直接根據這個IDE的提示來決定要不要加static關鍵字呢？不建議完全依賴【當然如果真的搞不太清，可以參考IDE的這些小提示】，這塊要不要static不應該從代碼的角度來進行推測，而應該從面向對象的本質來推測，為啥這個IDE會給出需要加static的警告是因為它發現該方法中木有用到“執行個體屬性”，像之前咱們所定義的方法都用到了“執行個體屬性”：
很明顯，咱們定義的這倆方法都沒用到“執行個體屬性”，是以完全可以定義成static，那這塊咱們還是使用static的版本了。
async和await問題探讨：
另外對于已定義這倆方法還有一個非常值得探讨的細節，就是是不是每一個方法我們都需要加async和await，比如：
其實，咱們這倆方法都不需要加async和await的，也就是：
await：
要知道原因，則需要先來了解加await它的含義是啥？加它的目的是為了等待拿到此次http請求的結果，但是！！！
同樣的，回到調用處：
而最終會在home.js中來進行調用對吧，咱們來寫一下：
這裡沒有加await就有問題了，為啥？因為它後面還有邏輯需要處理，需要将它做資料綁定的：
是以，此時必須要加await：
簡單總結就是如果當你發現此次的結果必須要等待以便進行後續的結果處理，那麼就需要加await，否則就不需要。
async：
那接下來再來看一下async，那對于咱們定義的這倆方法有必要加上async麼？
要想回答原因，則需要從async它的含義出手，它是強制保證一個方法最後必須是傳回promise的，但是！！！對于咱們這倆方法不需要強制保證，為啥？因為Http.request就已經傳回promise了：
那此時就沒必要再加上async來保證了，因為本身就已經是promise，是以這倆方法是不需要加async的。
MOCK資料搭建：
好，接下來則需要搭建一下with_spu接口的mock資料了，整個接口的json資料如下：
{
"id": 4,
"title": "每周上新",
"description": "風袖`每周上新`活動#每周都有一款折扣商品，每周都有适合你的唯一專屬#有Ins複古風裝飾；金屬CD唱片夾；每周來逛逛，找到你所喜愛的東西",
"name": "t-2",
"extend": null,
"entrance_img": null,
"internal_top_img": "http://i2.sleeve.talelin.com/m1.png",
"online": true,
"title_img": "http://i2.sleeve.talelin.com/m3.png",
"tpl_name": null,
"spu_list": [
{
"id": 25,
"title": "複古雙色沙發",
"subtitle": "雙色可選，經典青黃兩色",
"category_id": 35,
"root_category_id": 4,
"price": "3999",
"img": "http://i2.sleeve.talelin.com/h3.png",
"for_theme_img": "",
"description": null,
"discount_price": null,
"tags": "複刻經典$雙色可選",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 36,
"price": 3999,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/h4.png",
"title": "複古雙色沙發（藏青色）",
"spu_id": 25,
"category_id": 35,
"root_category_id": null,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 2,
"value": "藏青色"
},
{
"key_id": 7,
"key": "雙色沙發尺寸（非标）",
"value_id": 32,
"value": "1.5米 x 1米"
}
],
"code": "25$1-2#7-32",
"stock": 87
},
{
"id": 37,
"price": 3999,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/h3.png",
"title": "複古雙色沙發 (米黃色）",
"spu_id": 25,
"category_id": 35,
"root_category_id": null,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 35,
"value": "米黃色"
},
{
"key_id": 7,
"key": "雙色沙發尺寸（非标）",
"value_id": 33,
"value": "2米 x 1米"
}
],
"code": "25$1-35#7-33",
"stock": 56
}
],
"spu_img_list": [
{
"id": 88,
"img": "http://i2.sleeve.talelin.com/h3.png",
"spu_id": 25
},
{
"id": 89,
"img": "http://i2.sleeve.talelin.com/h2.png",
"spu_id": 25
},
{
"id": 90,
"img": "http://i2.sleeve.talelin.com/h4.png",
"spu_id": 25
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 26,
"title": "SemiConer柔質沙發",
"subtitle": "窩在沙發上，一杯紅酒配電影",
"category_id": 35,
"root_category_id": 4,
"price": "4799",
"img": "http://i2.sleeve.talelin.com/3.png",
"for_theme_img": "",
"description": null,
"discount_price": "4200",
"tags": "",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 38,
"price": 4799,
"discount_price": 4299,
"online": true,
"img": "http://i2.sleeve.talelin.com/3.png",
"title": "SemiConer柔質沙發（長款）",
"spu_id": 26,
"category_id": 35,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 27,
"value": "金色"
},
{
"key_id": 7,
"key": "雙色沙發尺寸（非标）",
"value_id": 33,
"value": "2米 x 1米"
}
],
"code": "26$1-27#7-33",
"stock": 7
},
{
"id": 39,
"price": 4799,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/3.png",
"title": "SemiConer柔質沙發 （L型）",
"spu_id": 26,
"category_id": 35,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 27,
"value": "金色"
},
{
"key_id": 7,
"key": "雙色沙發尺寸（非标）",
"value_id": 34,
"value": "L型 2米 + 0.8米"
}
],
"code": "26$1-27#7-34",
"stock": 7
},
{
"id": 40,
"price": 4799,
"discount_price": 4299,
"online": true,
"img": "http://i2.sleeve.talelin.com/3.png",
"title": "SemiConer柔質沙發（短款）",
"spu_id": 26,
"category_id": 35,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 27,
"value": "金色"
},
{
"key_id": 7,
"key": "雙色沙發尺寸（非标）",
"value_id": 32,
"value": "1.5米 x 1米"
}
],
"code": "26$1-27#7-32",
"stock": 6
}
],
"spu_img_list": [
{
"id": 150,
"img": "http://i2.sleeve.talelin.com/3.png",
"spu_id": 26
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 28,
"title": "Ins複古金色落地燈",
"subtitle": "Instagram複古台燈，就在此刻回到過去，找尋逝去的記憶",
"category_id": 23,
"root_category_id": 4,
"price": "999",
"img": "http://i2.sleeve.talelin.com/a9.png",
"for_theme_img": "",
"description": null,
"discount_price": null,
"tags": "Ins$複古流行",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 43,
"price": 999,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/a9.png",
"title": "Ins複古金色落地燈（落地燈）",
"spu_id": 28,
"category_id": 23,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 27,
"value": "金色"
},
{
"key_id": 8,
"key": "台燈高低",
"value_id": 38,
"value": "落地燈"
}
],
"code": "28$1-27#8-38",
"stock": 19
},
{
"id": 44,
"price": 999,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/a9.png",
"title": "Ins複古金色落地燈 （台燈）",
"spu_id": 28,
"category_id": 23,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 27,
"value": "金色"
},
{
"key_id": 8,
"key": "台燈高低",
"value_id": 39,
"value": "台燈"
}
],
"code": "28$1-27#8-39",
"stock": 19
}
],
"spu_img_list": [
{
"id": 141,
"img": "http://i2.sleeve.talelin.com/a9.png",
"spu_id": 28
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 8,
"default_sku_id": null
},
{
"id": 27,
"title": "Mier雙色靠椅",
"subtitle": "安靜的午後，一杯清茶，追憶似水年華。看清風浮動，看落日餘晖",
"category_id": 35,
"root_category_id": 4,
"price": "1299",
"img": "http://i2.sleeve.talelin.com/h1.png",
"for_theme_img": "http://i1.sleeve.7yue.pro/assets/f6c9fce8-626f-44c0-a709-3f6ef9f3fbef.png",
"description": null,
"discount_price": null,
"tags": "",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 41,
"price": 1399,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/h1.png",
"title": "Mier雙色靠椅（海藍色）",
"spu_id": 27,
"category_id": 35,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 36,
"value": "海藍色"
}
],
"code": "27$1-36",
"stock": 67
},
{
"id": 42,
"price": 1399,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/h1.png",
"title": "Mier雙色靠椅 （象牙白）",
"spu_id": 27,
"category_id": 35,
"root_category_id": 4,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 37,
"value": "象牙白"
}
],
"code": "27$1-37",
"stock": 13
}
],
"spu_img_list": [
{
"id": 190,
"img": "http://i2.sleeve.talelin.com/h1.png",
"spu_id": 27
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 23,
"title": "雙色牛仔褲",
"subtitle": "秋冬新款，做一個Cool Boy",
"category_id": 15,
"root_category_id": 2,
"price": "1399",
"img": "http://i2.sleeve.talelin.com/n11.png",
"for_theme_img": "http://i1.sleeve.7yue.pro/assets/702f2ce9-5729-4aa4-aeb3-921513327747.png",
"description": null,
"discount_price": null,
"tags": "",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 30,
"price": 1399,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n12.png",
"title": "雙色百褶裙（棕色）",
"spu_id": 23,
"category_id": 15,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 24,
"value": "棕色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 14,
"value": "小号 S"
}
],
"code": "23$1-24#4-14",
"stock": 69
},
{
"id": 31,
"price": 1399,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n14.png",
"title": "雙色百褶裙（鵝暖青）",
"spu_id": 23,
"category_id": 15,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 30,
"value": "鵝暖青"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 15,
"value": "中号 M"
}
],
"code": "23$1-30#4-15",
"stock": 7
},
{
"id": 32,
"price": 1399,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n13.png",
"title": "雙色百褶裙（鵝暖青 小号）",
"spu_id": 23,
"category_id": 15,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 30,
"value": "鵝暖青"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 14,
"value": "小号 S"
}
],
"code": "23$1-30#4-14",
"stock": 8
}
],
"spu_img_list": [
{
"id": 186,
"img": "http://i2.sleeve.talelin.com/n13.png",
"spu_id": 23
},
{
"id": 187,
"img": "http://i2.sleeve.talelin.com/n12.png",
"spu_id": 23
},
{
"id": 189,
"img": "http://i2.sleeve.talelin.com/n11.png",
"spu_id": 23
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 8,
"title": "Ins複古碎花NoteBook",
"subtitle": "林白默默的掏出小本本，将她說的話一次不漏的記了下來。",
"category_id": 32,
"root_category_id": 24,
"price": "29.99",
"img": "http://i2.sleeve.talelin.com/m19.png",
"for_theme_img": "http://i1.sleeve.7yue.pro/assets/b6442702-4810-46cb-bb0b-f4602d38e4ff.png",
"description": null,
"discount_price": "27.8",
"tags": "林白推薦",
"is_test": false,
"online": true,
"sku_list": [
{
"id": 47,
"price": 29,
"discount_price": 20,
"online": true,
"img": "http://i2.sleeve.talelin.com/m19.png",
"title": "ins複古印花NoteBook （一盒30）",
"spu_id": 8,
"category_id": 32,
"root_category_id": 24,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 41,
"value": "青草綠"
},
{
"key_id": 6,
"key": "數量",
"value_id": 28,
"value": "一盒30個"
}
],
"code": "8$1-41#6-28",
"stock": 19
},
{
"id": 48,
"price": 29,
"discount_price": 27,
"online": true,
"img": "http://i2.sleeve.talelin.com/m19.png",
"title": "ins複古印花NoteBook （一盒50個）",
"spu_id": 8,
"category_id": 32,
"root_category_id": 24,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 41,
"value": "青草綠"
},
{
"key_id": 6,
"key": "數量",
"value_id": 29,
"value": "一盒50個"
}
],
"code": "8$1-41#6-29",
"stock": 89
}
],
"spu_img_list": [
{
"id": 177,
"img": "http://i2.sleeve.talelin.com/m19.png",
"spu_id": 8
},
{
"id": 179,
"img": "http://i2.sleeve.talelin.com/m20.png",
"spu_id": 8
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 24,
"title": "秋冬新款駝色大衣",
"subtitle": "2020新款，暖暖過秋冬",
"category_id": 16,
"root_category_id": 2,
"price": "2999",
"img": "http://i2.sleeve.talelin.com/n3.png",
"for_theme_img": "http://i1.sleeve.7yue.pro/assets/b8e510a1-8340-43c2-a4b0-0e56a40256f9.png",
"description": null,
"discount_price": "2699",
"tags": "經典單色",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 33,
"price": 2799,
"discount_price": 1799,
"online": true,
"img": "http://i2.sleeve.talelin.com/n3.png",
"title": "秋冬新款駝色大衣",
"spu_id": 24,
"category_id": 16,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 31,
"value": "駝色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 14,
"value": "小号 S"
}
],
"code": "24$1-31#4-14",
"stock": 70
},
{
"id": 34,
"price": 2699,
"discount_price": 1799,
"online": true,
"img": "http://i2.sleeve.talelin.com/3.png",
"title": "秋冬新款駝色大衣（駝色 M号）",
"spu_id": 24,
"category_id": 16,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 31,
"value": "駝色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 15,
"value": "中号 M"
}
],
"code": "24$1-31#4-15",
"stock": 70
},
{
"id": 35,
"price": 2999,
"discount_price": 1699,
"online": true,
"img": "http://i2.sleeve.talelin.com/3.png",
"title": "秋冬新款駝色大衣 （L号）",
"spu_id": 24,
"category_id": 16,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 31,
"value": "駝色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 16,
"value": "大号 L"
}
],
"code": "24$1-31#4-16",
"stock": 47
}
],
"spu_img_list": [
{
"id": 172,
"img": "http://i2.sleeve.talelin.com/n3.png",
"spu_id": 24
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
},
{
"id": 6,
"title": "Sleeve風袖說牛仔系列",
"subtitle": "Sleeve風袖說當季經典款",
"category_id": 14,
"root_category_id": 2,
"price": "1799",
"img": "http://i2.sleeve.talelin.com/n14.png",
"for_theme_img": "",
"description": null,
"discount_price": "",
"tags": "包郵$熱門",
"is_test": true,
"online": true,
"sku_list": [
{
"id": 27,
"price": 1799,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n14.png",
"title": "風袖說 Sleeven牛仔 ",
"spu_id": 6,
"category_id": 14,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 12,
"value": "黑色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 14,
"value": "小号 S"
}
],
"code": "6$1-12#4-14",
"stock": 70
},
{
"id": 28,
"price": 1799,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n15.png",
"title": "風袖說 Sleeve牛仔 ",
"spu_id": 6,
"category_id": 14,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 12,
"value": "黑色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 15,
"value": "中号 M"
}
],
"code": "6$1-12#4-15",
"stock": 70
},
{
"id": 29,
"price": 1799,
"discount_price": null,
"online": true,
"img": "http://i2.sleeve.talelin.com/n16.png",
"title": "風袖說 Sleeve牛仔 ",
"spu_id": 6,
"category_id": 14,
"root_category_id": 2,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 12,
"value": "黑色"
},
{
"key_id": 4,
"key": "尺碼",
"value_id": 16,
"value": "中号 L"
}
],
"code": "6$1-12#4-16",
"stock": 70
}
],
"spu_img_list": [
{
"id": 43,
"img": "http://i2.sleeve.talelin.com/n15.png",
"spu_id": 6
},
{
"id": 44,
"img": "http://i2.sleeve.talelin.com/n16.png",
"spu_id": 6
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": 5
},
{
"id": 3,
"title": "抹茶小橡皮",
"subtitle": "小作文寫錯了，用它擦一擦",
"category_id": 32,
"root_category_id": 24,
"price": "29.99",
"img": "http://i2.sleeve.talelin.com/m17.png",
"for_theme_img": "https://gitee.com/lrelia7/sleeve-static/raw/master/theme/spu2.png",
"description": null,
"discount_price": "17.00",
"tags": "一飛推薦",
"is_test": false,
"online": true,
"sku_list": [
{
"id": 45,
"price": 22,
"discount_price": 17,
"online": true,
"img": "http://i2.sleeve.talelin.com/m17.png",
"title": "抹茶小橡皮 （一盒30個）",
"spu_id": 3,
"category_id": 32,
"root_category_id": 24,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 40,
"value": "抹茶綠"
},
{
"key_id": 6,
"key": "數量",
"value_id": 28,
"value": "一盒30個"
}
],
"code": "3$1-40#6-28",
"stock": 120
},
{
"id": 46,
"price": 22,
"discount_price": 20,
"online": true,
"img": "http://i2.sleeve.talelin.com/m17.png",
"title": "抹茶小橡皮（一盒50個）",
"spu_id": 3,
"category_id": 32,
"root_category_id": 24,
"specs": [
{
"key_id": 1,
"key": "顔色",
"value_id": 40,
"value": "抹茶綠"
},
{
"key_id": 6,
"key": "數量",
"value_id": 29,
"value": "一盒50個"
}
],
"code": "3$1-40#6-29",
"stock": 8
}
],
"spu_img_list": [
{
"id": 107,
"img": "http://i2.sleeve.talelin.com/m17.png",
"spu_id": 3
},
{
"id": 108,
"img": "http://i2.sleeve.talelin.com/m18.png",
"spu_id": 3
}
],
"spu_detail_img_list": [
],
"sketch_spec_id": 1,
"default_sku_id": null
}
]
} 回到https://testapi.io/中建立一個新的Mock接口：
關于這塊如何建立就不過多說明了，之前已經建立過的，最後通路效果如下：
接下來運作看一下，能否正常請求到，發現報404了：
這裡将這個字首去掉：
此時再請求就對了：
解析資料并進行元件資料綁定：
現在接口資料已經請求下來了，接下來則就需要對它進行一個解析了。
online屬性處理：
先來看一個傳回的資料屬性：
也就是這塊是可以由背景CMS系統來進行顯示控制的，對于每個主題其實也有這個屬性：
貌似少了咱們這次要請求的"t-2"主題，修改一下mock接口，增加上它：
很顯然咱們需要根據這個字段來決定要不要請求該主題下的spu商品資料對吧，是以先處理一下該邏輯：
商品截取：
另外對于這個主題的商品個數應該得截取一下，畢竟有一個檢視更多的功能，而目前咱們接口擷取的是該主題下所有的商品，是以做一下截取處理：
此時則在咱們的自定義元件中需要增加這個商品屬性，如下：
将元件引入到home當中：
要想在home中使用元件，需要在這塊進行引入：
另外，其實元件的引入還可以在全局的app.json中，像之前li-ui的元件：
當然這裡很明顯應該是在home.json進行引入，隻是了解一下app.json中也可以引入元件的這一特性。
好，此時就可以在home.wxml中進行使用了：
spu-scroll自定義元件：
接下來則回到spu-scroll元件中進行具體邏輯的編寫。
主題圖檔顯示：
其中設定一下樣式：
此時預覽一下：
spu-scroll顯示：
了解：
接下來則來建構下面的商品滑動效果，這個用微信小程式官方的控件既可，上官網看一下：
其中它有兩個屬性來控制是豎向滾動還是橫向滾動：
其中有一個重要的說明：
很多場景可能你不能把height給寫死，是以可以是需要你動态計算高度的，這塊有個了解待之後遇到再說，暫且先解到這，下面邊使用邊了解。
xml中定義：
綁定資料：
很明顯是需要進行一個周遊的，關于資料周遊在之前已經用過了，需要用到block标簽，回憶一下：
是以咱們編寫一下：
接下來則就需要建構清單項了：
先預覽看一下：
嗯，已經有了，隻是樣式不對，之後再調，那還差一個價格呀：
這塊咱們可以自己建構，但是這裡會打算使用開源的Lin Ui Price元件來弄，因為價格樣式可能之後還有很多，另外項目中未來會大量用到，要自己寫還是太麻煩了，是以下面來了解一下Lin Ui Price元件。
Lin UI Price價格元件應用：
了解：
關于Lin UI Price元件的使用可以上官網https://doc.mini.talelin.com/component/shopping/price.html檢視一下， 使用示例也比較簡單：
這裡就不過多說明了。
xml定義：
要想使用lin ui的這個元件，還是得先回到這塊進行引用：
為啥在app.json來引用呢，因為它還會被其它界面使用，下面來使用一下：
此時就可以看到預覽效果了：
而如果你想更換價格的币種，非常友善：
這裡還是将币種還原，然後設定一下顔色：
關于它的樣式設定有兩種方式，一種是通過這樣的屬性方式，但是它有局限性，因為這個元件對外定義的樣式屬性并不全，而另一種無限制的定義方式就是使用它提供的外部樣式類：
下面就打算來看一下如何通過外部樣式類的方式來定義元件的樣式。
外部樣式類使用：
這裡更改一下價格的機關和值的大小，由于這倆大小是不一樣的，正好可以使用外部樣式類的方式來進行調整，如果來使用了，如下：
然後樣式定義咱們來更改一下字型的大小：
你會發現顯示出來沒效果，這是因為對于外部樣式類需要加這麼一個東東"!important"：
這是因為在小程式中的自定義元件明确說明了，外部樣式類與元件内部之間的預設樣式它們之間的優先級是不确定的，而這個不确定就代表有可能不你加這個import也能生效，也有可能不生效，如果不生效時記得加上它，也不是說所有外部樣式屬性都加它，根據實際的情況來決定，其實css樣式是有權重的，不一定非得要用這種方式來提高權重，但是用這種方式是一種非常省事粗暴的【如果你用其它方式來提權重要了解的細節就比較】，因為它能将css的樣式權重提得很高。
最後咱們将寫死的價格改活：
運作：
整體樣式調整：
1、調整商品圖檔的樣式：
2、讓元素項豎直排列：
很明顯需要使用flex布局了，先要用一個view來整體包裹：
此時再看一下效果：
3、實作水準滾動效果：
接下來讓整個效果水準分布，此時還是得利用強大的flex布局，在scroll-view上進行設定了：
但是你會發現沒有效果，原因其實還是跟scroll-view這個元件的特性有關，因為需要開啟flex屬性才能支援，也就是：
是以咱們來設定一下：
而如果是true是可以簡寫成它的：
這一點一定要注意，接下來看一下效果：
嗯，基本的樣子有了，不過目前它還不能左右滑動，這個簡單，加一個屬性既可：
4、設定各種邊距：
此時再看一下：
其中有一個細節需要說明一下，怎麼保證主題圖檔的居中呢，其實這裡是通過定寬的方式來實作的，并未使用flex布局：
整個圖檔是347px，是以我們在樣式中設定了：
而整個設計稿的寬度是按375px，是以我們設定一下左邊距14px，也就是28rpx：
是不是右側的間距剛好就是14px？是以說這裡通過定長的方式來實作圖檔居中了，關于為啥設計稿是以375px來進行設計的，可以參考之前小程式的入門介紹：https://www.cnblogs.com/webor2006/p/11834878.html，簡單回憶一下：
是以關于這個細節需要了解一下。
接下來還需要設定一下這倆邊距：
如下：
此時再看一下效果：
基本差不多了，但是有一個奇怪的問題，居然底部空出來好大一截：
由于篇幅有限，下次繼續。
關注個人公衆号，獲得實時推送