60、商品收藏_引入自定义tabs组件
和之前的订单列表引入是一样的
pages\order\index.json——>pages\collect\index.json
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
},
"navigationBarTitleText": "商品收藏"
}
pages\order\index.js——>pages\collect\index.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id: 0,
value:"商品收藏",
isActive: true
},
{
id: 1,
value:"品牌收藏",
isActive: false
},
{
id: 2,
value:"店铺收藏",
isActive: false
},
{
id: 3,
value:"浏览足迹",
isActive: false
}
]
},
handleTabsItemChange(e){
// 1 获取被点击的标题索引
const {index}=e.detail;
// 2 修改源数组
let {tabs}=this.data;
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// 3 赋值到data中
this.setData({
tabs
})
}
})
pages\order\index.wxml——>pages\collect\index.wxml
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
内容
</Tabs>