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

小程序在js设置data，循环点击改变tab的颜色相关推荐

微信小程序App.js应用
微信小程序App.js应用文章目录微信小程序App.js应用 1.App.js内容 2.判断用户以什么方式进入小程序 3.获取用户信息 4.设置全局变量 1.App.js内容 App.js写逻辑内 ...
13.微信小程序（JS逻辑文件）
15.微信小程序(JS逻辑文件) 大纲 (1)业务逻辑案例 (2)调用API案例 (3)ECMAScript---- (4)小程序执行环境 (5)模块化 (6)作用域与全局变量前言前言: 一个服务 ...
学习如何使用微信小程序的for和foreach循环遍历获得索引和数据
学习如何使用微信小程序的for和foreach循环遍历获得索引和数据 js文件中定义数组第一种for循环方法第二种for循环方法length 第三种forEach循环方法 js文件中定义数组 * ...
在微信小程序的JS脚本中使用Promise来优化函数处理
在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入 ...
小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
自制微信小程序通讯JS
自制微信小程序通讯JS 起因现在微信小程序开发基本会使用到组件的开发.随着组件的不断增加,使得组件之间的通讯越发频繁.然后,微信小程序中组件之前通讯必须通过父子关系才能进行. 这个js能使得我们在组 ...
逆向小程序破解js神器-(工具篇)
首先声明: 此次逆向Js只为学习交流使用,切勿用于其他非法用途,关键代码均打码刚刚写过一篇,如何从小程序中把需要逆向的项目给打包导出到本地, 并翻译成js项目,进行破解.本章节主要分享动态调试小程序 ...
微信小程序app.js给全局变量globalData赋值
微信小程序app.js 中,从数据库读取登录数据后,想把登录信息变为全局遍历,这里为globalData赋值和其他的页面赋值不同. 需要先定义 that=this 之后用that.globalDat ...

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

小程序在js设置data，循环点击改变tab的颜色相关推荐

最新文章

热门文章