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


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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
jQuery 处理表单元素的代码
Feb 15 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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 SQL之where语句生成器
2009/03/24 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
简单了解Python write writelines区别
2020/02/27 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
浅析NumPy 切片和索引
2020/09/02 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
干部行政关系介绍信
2014/01/17 职场文书
爱祖国演讲稿
2014/05/04 职场文书
鸟的天堂导游词
2015/01/31 职场文书
2015年教师工作总结范文
2015/03/31 职场文书