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


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 相关文章推荐
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
Angularjs 基础入门
Dec 26 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
微信小程序 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/11/25 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Javascript Math对象
2009/08/13 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
基于python3实现socket文件传输和校验
2018/07/28 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
微观物理专业自荐信
2014/01/26 职场文书
运动会入场词50字
2014/02/20 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
怎样写好工作计划
2019/04/10 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL