0
点赞
收藏
分享

微信扫一扫

微信小程序实现给循环列表添加点击样式实例


微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: 

wxml:

​​?​​


1

2

3

4

5

6

7

8


​<view class=​​​​"taga"​​​​>​​​​ ​​​​<view class=​​​​"tag-title"​​​​>标签</view>​​​​ ​​​​<view class=​​​​"tag-box"​​​​>​​​​ ​​​​<view wx:​​​​for​​​​=​​​​"{{taga}}"​​​​wx:key=​​​​"id"​​​​wx:​​​​for​​​​-index=​​​​"i"​​​​>​​​​ ​​​​<view class=​​​​"taga-item {{currentItem==item.id?'active-tag':''}}"​​​​data-id=​​​​"{{item.id}}"​​​​bindtap=​​​​"tagChoose"​​​​>{{item.name}}</view>​​​​ ​​​​</view>​​​​ ​​​​</view>​​​​ ​​​​</view>​



js文件:

​​?​​


1

2

3

4

5

6

7

8

9

10

11


​tagChoose:​​​​function​​​​(options){​​​​var​​​​that = ​​​​this​​​​var​​​​id = options.currentTarget.dataset.id;​​​​console.log(id)​​​​//设置当前样式​​​​that.setData({​​​​'currentItem'​​​​:id​​​​})​



​}​



核心点:class=”taga-item {{dateCurrent==item.id?'active-tag':”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id

 




举报

相关推荐

0 条评论