小程序在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,})
      } 
    },