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


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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
js实现整体缩放页面适配移动端
Mar 31 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世纪万年历
2006/12/06 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
如何打开php的gd2库
2017/02/09 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
js实现碰撞检测
2021/01/29 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Python 使用office365邮箱的示例
2020/10/29 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
校园安全演讲稿
2014/05/09 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
浅析Python中的随机采样和概率分布
2021/12/06 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers