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


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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
window.onload使用指南
Sep 13 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
js实现html滑动图片拼图验证
Jun 24 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自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python中enumerate函数代码解析
2017/10/31 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python 实现dict转json并保存文件
2019/12/05 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
使用索引有什么好处
2016/07/27 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
微博营销计划书
2014/01/10 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
学校通报表扬范文
2015/05/04 职场文书
观后感的写法
2015/06/19 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
常用的Python代码调试工具总结
2021/06/23 Python