微信小程序 循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:numberArray: [1, 2, 3, 4]
wxml文件:
<view class="userList" wx:for="{{items}}" wx:key="{{item.userId}} wx:for-index="idx"">
<view class="{{userCellId==idx?'userCellActive':'userCell'}}" data-idx="{{idx}}" bindtap="userListAction">{{item.name}}</view>
</view>
1、page.data里设一个变量,比如userCellId(JS文件在下面
微信小程序 循环列表添加点击事件和样式的更多相关文章
- 微信小程序循环列表点击每一个单独添加动画
首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- 微信小程序新闻列表功能(读取文件、template模板使用)
微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...
- 微信小程序实现给循环列表添加点击样式实例
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...
- 微信小程序新闻网站列表页
在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...
- 微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理
前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一 ...
- 微信小程序中,如何点击链接跳转到外部网页
跳转到内部链接 这个我们应该都知道,通过wx.navigateTo,wx.redirectTo,wx.swtichTab等小程序内部的方法,可以直接跳转到小程序内部已经注册的(就是在app.json中 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
随机推荐
- SQL SERVER 2000安装遇到的问题小汇总(转载)
[1]安装程序配置服务器失败需要修改下注册表1 打开注册表 在"开始"--"运行"键入 "regedit" 2 删除注册表如下键值: HK ...
- linux thread_info 与thread_struct
有个同事看3.10代码中,看着两个结构,会混淆,所以我简单答复了一下. thread_info是和内核栈放一块的,网上到处都是thread_info的资料,但thread_struct的资料比较少,在 ...
- RH_KABI_RESERVE的使用
struct mm_struct { .......... #if defined(__GENKSYMS__) || !defined(CONFIG_SPAPR_TCE_IOMMU) /* We're ...
- [PHP]PHP缓存机制之Output Control
---------------------------------------------------------------------------------------------------- ...
- 9.mysql-存储过程.md
目录 创建 创建 -- 创建存储过程 DELIMITER $ -- 声明存储过程的结束符 CREATE PROCEDURE pro_test() --存储过程名称(参数列表) BEGIN -- 开始 ...
- C# 计算接口调用时长
//获取 接口的数据 Stopwatch sw = new Stopwatch();//计算耗时 sw.Start();fn1();//接口调用方法 sw.Stop();return JsonMsg. ...
- 吴裕雄 22-MySQL 事务
MySQL 事务MySQL 事务主要用于处理操作量大,复杂度高的数据.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如信箱,文章等等,这样,这些数据 ...
- CSS 字体术语
字体有些术语需要了解. 衬线字体 衬线字体指的是有衬线的字体,又称为有衬线体.衬线字.曲线描边字,俗称白体字. 衬线指的是字形笔画末端的装饰细节部分. 衬线字体便于阅读,通常用于长篇文本. 常见的衬线 ...
- 如何使用CBO,CBO与RULE的区别
Oracle的优化器有两种优化方式,即基于规则的优化方式(Rule-Based Optimization,简称为RBO)和基于代价的优化方式(Cost-Based Optimization,简称为CB ...
- workerman channel组件集群推送
<?phpuse Workerman\Worker; require_once '../../web/Workerman/Autoloader.php';require_once '../../ ...