小程序在js设置data，循环点击改变tab的颜色

业务场景：点击对应的按钮颜色出现在对应的按钮上

 

实现步骤：

1.在html循环tabs数据

2.点击按钮，获取tab的id，和长度，开始循环，做判断即可，代码一看就懂

js设置tab代码：

/*
author:咔咔
wechat：fangkangfk
address:陕西西安
*/
 
       tabs: [ {
            id: 0,
            uniuqeId: "uniqueId-0",
            name: "昨日数据",
            selected: !0,
            color: "#BEA67C"
        }, {
            id: 1,
            uniuqeId: "uniqueId-1",
            name: "全部数据",
            selected: !1
        } ],

 html代码：

/*
author:咔咔
wechat：fangkangfk
address:陕西西安
*/

<view class="m-tab">
        <view bindtap="onTapChangeTab" data-tabid="{{item.id}}" style="color:{{item.color}}" wx:for="{{tabs}}" wx:key="uniqueId">{{item.name}}</view>
    </view>

    <view class="m-data" hidden='{{selects}}'>
        <view class="m-dataTime">昨日数据</view>
        <view class="m-dataArea">
            <view class="m-dataItem">
                <text>浏览量</text>
                <view>{{viewNumY}}</view>
            </view>

        </view>
    </view>

    <view class="m-data" hidden='{{select}}'>
        <view class="m-dataTime">总体数据</view>
        <view class="m-dataArea">
            <view class="m-dataItem">
                <text>浏览量</text>
                <view>{{viewNum}}</view>
            </view>
        </view>
    </view>

js操作代码：

/*
author:咔咔
wechat:fangkangfk
adderss：陕西西安
*/

onTapChangeTab:function(a){
      // console.log(e.currentTarget.dataset.tabid)
      var tabid = a.currentTarget.dataset.tabid;
      var that = this;
 
      for (var t = a.currentTarget.dataset.tabid, o = this.data.tabs, e = 0; e < o.length; e++) o[e].id == t ? (o[e].selected = !0, 
      o[e].color = "#BEA67C") : (o[e].selected = !1, o[e].color = "");
      this.setData({
          tabs: o,
          page: 0,
      });
      
      if(tabid == 1){
        that.setData({
          select: false,
          selects: true,
        })
      }else{
        that.setData({
          select: true,
          selects: false,
        })
      } 
    },