上一篇我们搭建了底部的导航条，这一篇来拆解一下首页的功能。首页有如下功能
可以进行搜索
显示轮播图
横向可拖动的页签
图文卡片列表
1 home.json
因为是要使用组件库的组件搭建页面，自然是先需要引入自定义组件
{ "navigationBarTitleText": "首页", "onReachBottomDistance": 10, "backgroundTextStyle": "light", "enablePullDownRefresh": true, "usingComponents": { "t-search": "tdesign-miniprogram/search/search", "t-loading": "tdesign-miniprogram/loading/loading", "t-swiper": "tdesign-miniprogram/swiper/swiper", "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav", "t-image": "/components/webp-image/index", "t-icon": "tdesign-miniprogram/icon/icon", "t-toast": "tdesign-miniprogram/toast/toast", "t-tabs": "tdesign-miniprogram/tabs/tabs", "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel", "goods-list": "/components/goods-list/index", "load-more": "/components/load-more/index" } }
引入的组件还是不少的，贴入配置后发现控制台报错，因为这里既使用到了TDesign中的组件，也使用到了自定义组件，我们需要将报错的组件，自己搭建一下。
其实解决问题就像俄罗斯套娃一样，拿走一个里边还有一个，直到你拿到最后一个才可以
2 goods-list组件
选中components文件夹，右键新建一个文件夹
输入goods-list，然后在goods-list文件夹上右键，点击新建Page
然后输入index，自动生成四个文件，index.wxml、index.wxss、index.json、index.js
自定义组件也是包含四个文件，要依次看模板的代码
index.json
{ "component": true, "usingComponents": { "goods-card": "/components/goods-card/index" } }
这里goods-list又继续引用了goods-card组件
index.js
Component({ externalClasses: ['wr-class'], properties: { goodsList: { type: Array, value: [], }, id: { type: String, value: '', observer: (id) => { this.genIndependentID(id); }, }, thresholds: { type: Array, value: [], }, }, data: { independentID: '', }, lifetimes: { ready() { this.init(); }, }, methods: { onClickGoods(e) { const { index } = e.currentTarget.dataset; this.triggerEvent('click', { ...e.detail, index }); }, onAddCart(e) { const { index } = e.currentTarget.dataset; this.triggerEvent('addcart', { ...e.detail, index }); }, onClickGoodsThumb(e) { const { index } = e.currentTarget.dataset; this.triggerEvent('thumb', { ...e.detail, index }); }, init() { this.genIndependentID(this.id || ''); }, genIndependentID(id) { if (id) { this.setData({ independentID: id }); } else { this.setData({ independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`, }); } }, }, });
自定义组件的externalClasses表示外部样式类，可以在引用的时候传入样式来改变组件的样式。properties表示组件对外暴露的属性，可以根据组件的需要进行设置。method表示组件可以响应的事件，看目前的设置事件是和电商业务相关的，具体是什么含义，我们在调用的时候再分析
index.wxml
<view class="goods-list-wrap wr-class" id="{{independentID}}"> <block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index"> <goods-card id="{{independentID}}-gd-{{index}}" data="{{item}}" currency="{{item.currency || '¥'}}" thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" bind:thumb="onClickGoodsThumb" bind:click="onClickGoods" bind:add-cart="onAddCart" /> </block> </view>
这是组件的内容部分，他又使用了一个goods-card组件
index.wxss
.goods-list-wrap { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0; background: #fff; }
样式部分还是很简单的，他是设置了一个流式布局，元素是按行排列，要求自动换行，水平对齐是两端对齐，没有内边距并设置了一定的背景色
