欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序点击移除添加class(点击改变背景颜色和字体颜色) ... ... ...

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:501

微信小程序点击移除添加class(点击改变背景颜色和字体颜色) ... ... ...

发布时间:2020-11-16  

微信小程序不允许DOM操作,所以不能用addClass这种方法,我的用法如下。

点击元素后,获取元素中data-select值,赋值给catalogSelect,然后判断二者是否相等,一样则添加class(class的css可以先写好)。

这里写图片描述

<view class="info_choose "> <view class="catalog_name">花色view> <view class="catalog_items display-flex-row" > <block wx:for="{{catalogs}}"> <text data-select="{{item.select}}" class="{{item.select == catalogSelect ? 'active':''}} catalog_item" bindtap="chooseCatalog">{{item.catalogName}}text> block> view> view>

1

2

3

4

5

6

7

8

9

10

1

2

3

4

5

6

7

8

9

10

//js代码 Page({ data: { catalogs:[ { "catalogName": "卡其卡其", "select":1 }, { "catalogName": "其卡其卡卡其卡其", "select": 2 }, { "catalogName": "鲤鱼鲤鱼", "select": 3 }, { "catalogName": "神迹神迹卡其卡其", "select": 4 }, ], catalogSelect:0,//判断是否选中 }, chooseCatalog:function(data){ var that=this; that.setData({//把选中值放入判断值 catalogSelect : data.currentTarget.dataset.select }) } })