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

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

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

image.png


实现步骤:


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
        } ],
/*
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,
        })
      } 
    },
相关文章
|
2月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
37 6
JS循环for、for...of、for...in
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
48 2
JavaScript基础知识-流程控制之while循环
|
29天前
|
JavaScript 前端开发
js循环有几种
js循环有几种
29 0
|
3月前
|
JavaScript 前端开发
JavaScript中有哪几种循环?他们的运用场景在哪?
JavaScript中有哪几种循环?他们的运用场景在哪?
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
137 0
|
1天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
11 2
|
18天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
232 1
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
51 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
2月前
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
42 1
JavaScript基础知识-forEach循环

热门文章

最新文章