小程序在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,
        })
      } 
    },
相关文章
|
12月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
157 6
JS循环for、for...of、for...in
|
11月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1959 1
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
163 2
JavaScript基础知识-流程控制之while循环
|
11月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
131 0
|
12月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
6月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
8月前
|
JavaScript 算法 安全
深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
在数字化时代,共享文件的安全性至关重要。本文聚焦Node.js环境,介绍如何通过JavaScript对象字面量构建数据结构管理文件安全信息,包括使用`bcryptjs`库加密密码和权限校验算法,确保高效且安全的文件共享。通过实例代码展示加密与权限验证过程,帮助各行业实现严格的信息资产管理与协作。
|
10月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
438 10
|
10月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
85 2
|
10月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2020 4