1. Tabs组件的封装

---

1.1 组件的引入

使用自定义的组件很简单,只需在使用组件的页面的配置文件.json文件中配置.

// pages/goods_list/index.json
{"usingComponents":{"Tabs": "../../components/Tabs/Tabs"}
}

然后再.wxml文件中使用即可

<!-- pages/goods_list/index.wxml -->
<Tabs></Tabs>

1.2 向组件传递参数(父->子)

在父页面中首先有如下数据

// pages/goods_list/index.js
page({data:{tabs: [...]}
})

然后在使用组件的时候将参数带上

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"></Tabs>

在组件中接收参数

// components/Tabs/Tab.js
Component({properties:{tabs:{type: Array,value: []}}
})

之后就可以使用参数了. 下面是使用参数的写的一个小栗子:

<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item"></view></view>
</view>

1.3 给组件绑定点击事件

关键在于bindtap

<!-- components/Tabs/Tabs.wxml -->
<view bindtap="handleItemTap" data-hello="world">
</view>

上述将传递的参数写在了data-hello中,然后js中写事件处理函数

// components/Tabs/Tab.js
Components({methods: {handleItemTap(e) {// 接收data-hello属性的值const { hello } = e.target.dataset;}}
})

1.4 向父级传递值(子->父)

在子组件的事件处理函数中调用微信提供的triggerEvent

// components/Tabs/Tabs.js
Component({methods:{handleItemTap(e) {const { hello } = e.target.dataset;this.triggerEvent("TabsItemChange", { hello })}}
})

以上实现了: 当点击子组件的view标签时,会像父组件传递一个 { hello: world}的字符串.下面在父组件调用Tabs组件的位写上一个接收该方法的函数

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}" bindTabsItemChange ="handleTabsItemChange"></Tabs>

以上在父组件中添加了一个事件处理函数的索引信息,下面在父组件的js文件中实现事件处理函数

// pages/goods_list/index.js
Page({handleTabsItemChange(e) {const {hello} = e.detailconsole.log(hello);}
})

1.5 插槽的实现

Tab栏的最基本功能是,根据点击的小tips,底下的内容跟着改变.这在设计Tabs组件的时候就该考虑到

<!-- components/Tabs/Tabs.wxml -->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id">{{item.value}}</view></view><view class=”tabs_content><!-- 注意此处实现插槽 --><slot></slot></view>
</view>

在使用的时候,只需使用block标签替换插槽中的内容即可

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"><block wx:if="{{tabs[0].isActive}}">综合</block><block wx:elif="{{tabs[1].isActive}}">销量</block><block wx:elif="{{tabs[2].isActive}}">价格</block>
</Tabs>

1.6 总体代码

包括组件的实现和调用

【组件的wxml】

<!--components/Tabs/Tabs.wxml-->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive? 'active': ''}}"bindtap="handleItemTap"data-index="{{index}}">{{item.value}}</view></view><view class="tabs_content"><slot></slot></view>
</view>

【组件的js】

// components/Tabs/Tabs.js
Component({/*** 组件的属性列表*/properties: {tabs: {type: Array,value: [],},},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemTap(e) {// 1. 获取点击的索引const { index } = e.target.dataset// 2. 触发父组件中的事件this.triggerEvent("TabsItemChange", {index})},},
})

【组件的样式】

/* components/Tabs/Tabs.wxss */
.tabs {}.tabs_title {display: flex;
}.title_item {flex:1;display: flex;justify-content: center;align-items: center;padding: 15rpx 0;
}.active{color: var(--themeColor);border-bottom: 5rpx solid currentColor;
}

【调用的wxml】

<!--pages/goods_list/index.wxml-->
<Tabs tabs="{{tabs}}" bindTabsItemChange="handleTabsItemChange"><block wx:if="{{tabs[0].isActive}}">综合</block><block wx:elif="{{tabs[1].isActive}}">销量</block><block wx:elif="{{tabs[2].isActive}}">价格</block>
</Tabs>

【调用的js】

// pages/goods_list/index.js
Page({/*** 页面的初始数据*/data: {tabs: [{id: 0,value: '综合',isActive: true,},{id: 1,value: '销量',isActive: false,},{id: 2,value: '价格',isActive: false,},],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)},// 标题的点击事件(从子组件传递过来)handleTabsItemChange(e) {const { index } = e.detaillet { tabs } = this.datatabs.forEach((v, i) => (i == index ? (v.isActive = true) : (v.isActive = false)))this.setData({tabs})}
})