小程序在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,
        })
      } 
    },
相关文章
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
611 1
|
19天前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
64 10
|
2月前
|
JavaScript 前端开发
JS判断点击是单击还是双击
如何使用JavaScript判断用户点击是单击还是双击。
40 0
|
3月前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
55 1
|
3月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
23 1
|
3月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
20 1
|
3月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
34 1
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
3月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
3月前
|
小程序 JavaScript

热门文章

最新文章

下一篇
无影云桌面