小程序高级电商前端第2周深入理解REST API开发规范 开启三端分离编程之旅＜二＞----scroll-view组件的灵活应用、async和await问题探讨、spu-scroll自定义组件

前言：

 

转眼距离上一次写博文又过去一个月了，今年的博文节奏已经彻底被打破了：

真的是有心无力了，其原因在之前也提到过，组织架构调整，各种考核（跨领域性质的考核）实行末尾淘汰制，说不出的酸楚，不过换个心态来讲，通过这种公司的硬性考核打破了自己的舒适区，其实或多或少也开拓了自己的眼界，对自己也是一种提升吧，所以今年这块的更新节奏就彻底“放弃”了，不过并非真正的放弃，这块的笔记是自己成长的记忆，非常珍贵的财富，会活到老写到老的，鸡汤撒一撒，该进入正题了，这次依然是跟Java全栈相关的，对于去年在学的那些【flutter、rn、数据结构、ios...】待之后有时间再续更，总之，不会轻易就放弃啦。

scroll-view组件的灵活应用：

效果：

在上一次博文阅读密码验证咱们已经对首页的主题效果进行了实现，接下来咱们准备往下继续，到它了：

其中它是可以左右滑动的：

说实话，对于微信小程序开发小白的我来说，这效果感觉好难，接下来则一点点来搞定它。

实现：

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”一起理解，关于这俩词的区别网上搜了下，这篇SKU 和 SPU 有什么区别？ - 知乎讲得比较通俗了：

所以接下来则需要来定义这么一个查询接口。

3、定义获取单个专题的详情（含Spu数据）API：

此时API的定义就需要在这了：

而由于它是需要在home.js中来进行调用的，很显然此时如果调用在外面还需要传递主题的name，而关于所有主题类型咱们都已经在theme.js当中了：

那，为了让外层调用不关注这个参数的细节，最好是再封装一个额外的方法，如下：

static修饰方法问题探讨：

在继续往下进行编写之前，需要探讨一个问题，就是咱们这次在定义方法时加了static，而之前在获取主题相关数据时是木有加的：

关于加与不加其实就是调用方式的不同对吧【static是类调用，而非static是类的实例调用】，这块就不过多说明了，其实衡量一个方法之前要不要加static，最最简单的理解就是看此方法是不是需要保持数据的状态【关于数据状态这块可以参考博文阅读密码验证】，如果需要则不应该加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
        }
    ]
}

回到Create a Free Mock API with 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组件的使用可以上官网价格 Price | Lin UI查看一下， 使用示例也比较简单：

这里就不过多说明了。 

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来进行设计的，可以参考之前小程序的入门介绍：从一个简单的“欢迎”页面开始小程序之旅，简单回忆一下：

所以关于这个细节需要了解一下。

接下来还需要设置一下这俩边距：

如下：

此时再看一下效果：

基本差不多了，但是有一个奇怪的问题，居然底部空出来好大一截：

由于篇幅有限，下次继续。