如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *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文件在下面

微信小程序 循环列表添加点击事件和样式的更多相关文章

  1. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  2. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  3. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

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

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

  5. 微信小程序新闻网站列表页

    在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...

  6. 微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

    前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一 ...

  7. 微信小程序中,如何点击链接跳转到外部网页

    跳转到内部链接 这个我们应该都知道,通过wx.navigateTo,wx.redirectTo,wx.swtichTab等小程序内部的方法,可以直接跳转到小程序内部已经注册的(就是在app.json中 ...

  8. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  9. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

随机推荐

  1. 如何查看虚拟机的ip地址,以及如何给虚拟机配置静态ip

    1 在命令行上敲ifconfig 如下图: 通过inet addr : 192.168.25.129就是你的虚拟机当前的ip 2. 我们一般在局域网内是通过dhcp协议向网关发送ip请求,因此获取的i ...

  2. linux 覆盖可执行文件的问题

    测试环境是3.10.0 内核. 有一次操作中,发现cp -f A B执行的时候,行为不一样: 当B没被打开,则正常覆盖B. 当B是被打开,但没有被执行,则能覆盖, 当B被打开,且被执行,则不能直接覆盖 ...

  3. spring之Environment

    Spring 的Environment包含两方便的抽象,profile和 property 前者是一组bean的定义,只有相应的profile被激活的情况下才会起作用. 后者是提供方便的抽象,应用程序 ...

  4. VUE 计算属性 vs 侦听属性

    计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

  5. WEB前端问题——img标签的onclick事件无法响应问题【转载】

    一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...

  6. Jetty-attack-test

    import httplib, urllib, ssl, string, sys, getopt from urlparse import urlparse ''' Author: Gotham Di ...

  7. 面图层拓扑检查和错误自动修改—ArcGIS案例学习笔记

    面图层拓扑检查和错误自动修改-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据源: gis_ex10\ex01\parcel.shp, ...

  8. (转) 为什么选择.NETCore?

    https://www.cnblogs.com/xiaoliangge/p/8373100.html 为什么选择.NETCore?    为什么选择.NETCore? 学习新的开发框架是一项巨大的投资 ...

  9. is not writable or has an invalid setter method错误的解决

    java中在配置spring时,遇到is not writable or has an invalid setter method的错误一般是命名方式的问题 需要写成private userInfoD ...

  10. unity3d assetbundle打包策略

    由于assetbundle打包存在依赖的问题,所有资源要进行合理的分包 零.代码 代码都放在本地,包括NGUI等插件的代码.shader代码(内置的shader无需打包,而自定义的shader还是需要 ...