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