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


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陷阱题
Feb 07 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 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
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
内容编辑个人求职信
2013/12/10 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
放射科岗位职责
2015/02/14 职场文书