微信小程序实现给循环列表添加点击样式实例
2024-08-29 03:08:22
微信小程序有个属性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
最新文章
- WinForm最小化到托盘以及托盘右键菜单
- Magento学习第一课——目录结构介绍
- 我的Java后端书架 (2016年暮春3.0版)
- 学习笔记001之[Android开发视频教学].01_15_Handler的使用(二)
- 管道Pipe
- 客户端动态调用cxf websevice 异常
- Android仿微信UI布局视图(圆角布局的实现)
- excel==>;csv==via phpmyadmin (edit php.ini &; my.ini)==>; MySQL Database
- CodeForces 510E Fox And Dinner
- telnet命令使用详解
- MySQL的变量分类总结
- FIFO深度计算
- 一篇文章彻底搞懂es6 Promise
- 第三节:SignalR之PersistentConnection模型详解(步骤、用法、分组、跨域、第三方调用)
- word2vec初探
- vim编辑器的设置
- FTPClient工具类
- Android中intent的分类及使用
- Spark之GraphX的Graph_scala学习
- ajax在jQuery中的应用 (1)加载异步数据
热门文章
- openerp 7.0邮件多用户发送失败问题 解决方法
- not available in automatic reference counting mode
- unique-paths I &;II 路径数,动态规划
- Java在不同线程中运行代码
- Android开发之使用DefaultHandler处理XML数据
- Ajax学习(二):模仿jQuery的Ajax封装工具
- 转 php安装错误configure: error: Please reinstall the libcurl distribu
- ansible2.4.x RPM急速安装
- Region使用全解
- UVA - 10298 Power Strings (KMP求字符串循环节)