背景：

这几天做代码review时，发现有同学在实现类似tab标签切换这种效果，通过单独添加一个属性用来控制标签激活态的显示与隐藏，标签切换时，从数据变化到更新视图一定程度上也会更耗性能一些。这样写不是很好，故这里进行优化一下，欲实现效果如下图：

话不多说，上代码。

旧代码：

wxml部分：

{{ item.name }}



js部分：

Page({
  data: {
    list: [{
          id: 1,
          name: '标签一',
          choosed: true
        }, {
            id: 2,
            name: '标签二',
            choosed: false
        }, {
            id: 3,
            name: '标签三',
            choosed: false
        }, {
            id: 4,
            name: '标签四',
            choosed: false
     }],
    },
    // 优化前 点击标签事件
    chooseTab(e) {
        const { item } = e.currentTarget.dataset
        const { list } = this.data
        list.forEach(v => {
            v.choosed = v.id === item.id
        })
        this.setData({
            list
        })
    },
  })
        

优化后代码：

wxml部分：

{{ item.name }}


js部分：

Page({
  data: {
    listOPT: [{
            id: 1,
            name: '标签一',
        }, {
            id: 2,
            name: '标签二'
        }, {
            id: 3,
            name: '标签三'
        }, {
            id: 4,
            name: '标签四'
        }],
        choosedId: 2, // 选中标签id  
   },
    // 优化后 点击标签事件
    chooseTabOPT(e) {
        const { index } = e.currentTarget.dataset
        const { listOPT } = this.data
        this.setData({
            choosedId: listOPT[index].id
        })
    }
})

代码片段：https://developers.weixin.qq.com/s/VxU5I3mr7jBC

总结：

实际项目中有不少类似的ui交互，优化前的方法虽能实现效果，但在一定程度上会更耗性能一些。如后续逻辑需要将选中标签的id传给后端做相关业务，则需要再次循环一遍list，把choosed为true的筛选出来，如此会比较麻烦些。这次就到这里吧，铁子们有更好的实现方式，欢迎在下面回帖哦~