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

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

小程序在js设置data,循环点击改变tab的颜色_第1张图片

 

实现步骤:

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:陕西西安
*/


        {{item.name}}
    

    

    

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,
        })
      } 
    },

 

你可能感兴趣的:(小程序)