问了度娘很久，感觉很多例子都用不到开发上，综合了三个小时。有了完整的方案

第一种 后台获取list集合,js中判断动态修改js

第二种 手动定义list集合,js中判断动态修改js

流程

后台返回了一个List保存在page中，wxml中 wx.for循环遍历。然后动态点击，调整class的样式

案例效果 （圈住的部分为例子，点击哪个语言，哪个标签就变黄）

第一种效果图

第二种效果图 （这三个标签，是固定的，不是后台获取的）

第一种 ----------后台动态获取，前台动态修改class

代码部分：

简易流程：在wxml中 使用 for循环时候的 index索引。当标签点击的时候 使用data-index={{index}} 将index传值，与js中定义的 _tapLatitude 变量作比较，如果相同就使用 orgecol 这个class

刚开始看有点晕，多想一下就明白了

wxml 文件的 wx.for循环

 <view  wx:for="{{languageList}}" wx:for-item="language" wx:for-index="index" class="viewlabel  {{_tapLatitude==index?'orgecol':''}}" data-name="{{language}}" data-index="{{index}}" bindtap="getLanguage">{{language}}</view>

js中的

Page({/*** 页面的初始数据*/data: {_tapLatitude:-1,//语种点击 存储变量},//排序语种获取getLanguage : function (e) {//因为是标签。所以再点一下就要取消if (that.data._tapLatitude == e.currentTarget.dataset.index){this.setData({_tapLatitude:-1, //值还原})}else{this.setData({_tapLatitude: e.currentTarget.dataset.index, //获取index传入的值。与定义全局变量作比较})}},})

第二种 ----------wxml中固定，js中动态修改class

流程思路同第一种 都用定义一个变量

wxml 文件中的代码

  <view class="viewcontentone" ><view class="contover {{_tapSort==1?'orige':''}} " bindtap="getSort" data-name="距离排序" data-id="1">{{sortItemLists[0]}}</view><view class="contover {{_tapSort==2?'orige':''}}"  bindtap="getSort"  data-name="星级排序" data-id="2">{{sortItemLists[1]}}</view><view class="contover {{_tapSort==3?'orige':''}}"  bindtap="getSort"  data-name="单量排序" data-id="3">{{sortItemLists[2]}}</view></view>

js 文件中的代码

Page({/*** 页面的初始数据*/data: {sortItemLists: ['距离排序', '星级排序','单量排序'],//导游排序列表_tapSort:3,//排序点击 存储变量 设置3 因为默认使用3排序},//修改排序的值字段getSort: function (e) {var that = this;let sortItemId = e.currentTarget.dataset.idthat.setData({"_tapSort": sortItemId})},})

因为每个项目业务不同，所有会有一些偏差。因为代码是剪切式。如有遗漏看不懂的地方以及问题留言哈！

微信小程序 事件点击后如何动态增删class类名（自用，没毛病）相关推荐

1. 微信小程序：block制作动态商品列表

   微信小程序:block制作动态商品列表 在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图 实现代码 js: P ...

2. 【微信小程序/事件】事件响应的各种场景

   [微信小程序/事件]事件响应的各种场景 bindtap:点击事件 (1)使用范例 bindfocus:聚焦事件 (1)使用范例 bindblur:失焦事件 (1)使用范例 bindinput:输入事件 ...

3. Android微信小程序原理,微信小程序事件流原理解析

   这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...

4. 微信小程序 事件传参

   微信小程序 事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...

5. 微信小程序给echarts图表动态赋值

   微信小程序给echarts图表动态赋值 接上一篇:微信小程序引入echart图表 直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...

6. 微信小程序使用echarts绘画动态图表

   微信小程序使用echarts绘画动态图表 首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...

7. 微信小程序之获取后台动态数据表格布局display:table

   微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...

8. ios 上传图片失败 小程序_微信小程序ios端 使用ajaxSubmit上传图片失败，android没问题...

   微信小程序ios端 使用ajaxSubmit上传图片失败,android没问题 微信小程序开发上传图片,使用ajaxsubmit,post请求,form设置multipart/form-data, a ...

9. 微信小程序底部实现自定义动态Tabbar

   多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

最新文章

1. java实现多线程的方式并源码分析
2. (转载)(c#)数据结构与算法分析 --数组、向量和表
3. UIAlertAction添加输入框
4. [转载] 中华典故故事（孙刚）——31 千里送鹅毛_礼轻情义重
5. MySQL 入门（三）—— MySQL数据类型
6. 推荐 7 个神级 Java 开源项目
7. 关于Zipf定律的理解和python实现
8. iOS之healthKit
9. 解决JSON页面乱码
10. sqlite报错database is locked
11. Clion 配置 opencv不显示图片Process finished with exit code -1073741515 (0xC0000135)
12. 我曾经爱过你---I Loved You
13. Mac的谷歌浏览器安装Vue.js.devtools插件
14. Excel区间数据拆分
15. 对Send（）函数的一些理解
16. 撕掉代工标签，能否迎来芯片市场的“权力转移”？...
17. linux 下geoda软件,GeoDa下载_GeoDa官方下载1.14.0.0 - 系统之家
18. 在线教育：直播课堂会有哪些问题？
19. 开机提示“bootmgr is missing”的原因分析和解决方法
20. 如何启动java服务以进程的方式启动

热门文章

1. unet脑肿瘤分割_2D UNet3+ Pytorch实现 脑肿瘤分割
2. linux下read函数缺失字节_机器人、工控机和Linux 网络编程接口能否蹭出火花？
3. N皇后问题的两个最高效的算法
4. PC网页实现九宫格切图功能
5. Internet History, Technology, and Security（week5）——Technology: Internets and Packets
6. bzoj 4551: [Tjoi2016Heoi2016]树【并查集】
7. 软件架构师的工作流程
8. 1.15运行命令直至执行成功
9. 在SqlServer存储过程中使用Cursor（游标）操作记录
10. 使用C++对TINY+语言进行词法分析、语法分析、语义分析和中间代码生成