微信小程序项目_秋泊优选64

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>