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


Posted in Javascript onApril 26, 2017

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

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

wxml:

<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文件:

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
jquery中动态效果小结
Dec 16 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
微信小程序 request接口的封装实例代码
Apr 26 #Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 #Javascript
微信小程序 flex实现导航实例详解
Apr 26 #Javascript
微信扫码支付零云插件版实例详解
Apr 26 #Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 #Javascript
微信小程序 实例开发总结
Apr 26 #Javascript
AngularJS 霸道的过滤器小结
Apr 26 #Javascript
You might like
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
python实现SMTP邮件发送功能
2020/06/16 Python
利用Python爬取可用的代理IP
2016/08/18 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Python datetime 如何处理时区信息
2020/09/02 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
2014年医院后勤工作总结
2014/12/06 职场文书
婚宴新郎致辞
2015/07/28 职场文书
孙振耀退休感言
2015/08/01 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis