微信小程序利用tabs实现标签页demo

场景

根据商户信息状态字段的不同值，将其渲染到不同的标签页下。

准备数据

根据状态字段的值不同，将其放到两个数组中。

data: {
    key: '',
    active:0,
    storeData: [],
    arr1: [],
    arr2: []
  },
onLoad: function () {
    var newArr1=this.data.arr1
    var newArr2=this.data.arr2
    var newData=app.globalData.storeData
    for (let i = 0; i < newData.length; i++) {
      if (newData[i].status == '1') {
        newArr1.push(newData[i])
      } else if (newData[i].status == '2') {
        newArr2.push(newData[i])
      }
    }
    this.setData({
      'storeData': newData,
      'arr1':newArr1,
      'arr2':newArr2,
    })
  },

页面结构

根据active的值条件渲染van-tab中的内容

JS代码

页面中为van-tabs标签绑定事件，将切换标签时被选中标签的index值赋值给active。

onAnotherChange(event) {
    this.setData({
      'active':event.detail.index
    })
  },

页面效果