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

微信小程序有个属性hover-class=‘active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码:
wxml:

 <view class="tags"><view class="tag-title">标签</view><view class="tag-box"><view wx:for="{{tags}}" wx:key="id" wx:for-index="i"><view class="tags-item {{currentItem==item.id?'active-tag':''}}" data-id="{{item.id}}" bindtap="tagChoose">{{item.name}}</view></view></view></view>
sdf

js文件:

  tagChoose:function(options){var that = thisvar id = options.currentTarget.dataset.id;console.log(id)//设置当前样式that.setData({'currentItem':id})}

核心点:class="tags-item {{dateCurrent==item.id?‘active-tag’:’’}}"模板文件中使用三元运算符,通过dateCurrent指定当前item的id

关注获取最新优质文章

微信小程序实现给循环列表添加点击样式相关推荐

微信小程序之实现循环动态添加和删除输入框
1.页面代码: <block wx:for="{{lists}}" wx:key="{{index}}"><van-field class=& ...
小程序中for循环列表后点击不同列表跳转不同页面
奥利给,加油加油,加油最近没那么多事了,但是学习绝对不能拉下,加油代码: wxml: <view class="lingshi">零食天地</view> ...
微信小程序wx:for遍历列表后点击不同列表跳转不同页面
wxml代码 <view class="shangpingflex"><view wx:for="{{shangpinglan}}" wx:k ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
微信小程序如何双重循环
微信小程序解决双重循环准备知识 wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item 可使用 wx:for-item 指定当前元 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...

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

微信小程序实现给循环列表添加点击样式相关推荐

最新文章

热门文章