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


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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 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注入攻击与XSS攻击
2012/06/10 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python新手实现2048小游戏
2015/03/31 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
有个性的自我评价范文
2013/11/15 职场文书
大学军训感言800字
2014/02/27 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
志愿者事迹材料
2014/12/26 职场文书
个人党性分析总结
2015/03/05 职场文书
锦旗赠语
2015/06/23 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
python基础之爬虫入门
2021/05/10 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技