微信小程序 循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <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,进 ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
随机推荐
- python语言中的数据类型之列表
数据类型及内置方法 列表: list 可变类型,有序 用途:用来记录多个值(同属性) 定义方式:在[ ]内用逗号分隔开多个任意类型的值 l=['a','b','c'] #l=list(['a' ...
- linux 一个跟踪文件删除的小技巧
最近有同事问我说他有个现场环境,经常会丢失业务文件,每天都出现,几百个里面丢失1到两个. 为了解决这个问题,我让他布置audit,具体可以man一下auditctl. 过了一天,他说audit.log ...
- DO and DOES Reduction
DO and DOES Reduction Share Tweet Share Tagged With: DO and DOES Reductions ‘Do’ and ‘does’ can be r ...
- Haskell语言学习笔记(73)Existentials
Existentials(存在类型) Existentially quantified types(Existentially types,Existentials)是一种将一组类型归为一个类型的方式 ...
- DD-WRT动态更新WAN口MAC
将代码在command窗口粘贴后,另存为startup,然后重启路由即可 #!/bin/ash MAC=`(date; cat /proc/interrupts) | md5sum | sed -r ...
- C#格式化数值结果表(格式化字符串)
字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0:D3}", ...
- java 代码块,静态代码块,构造器等的执行顺序
写了一段测试代码,如下: public class ExecutionSequence extends fatherClass{ static{ System.out.printl ...
- ADO.Net 数据库 删除
删除数据库里的信息和之前增加,修改大同小异,其写法更加简单,也是把SQL语句写为删除语句 删除一条数据,只需要获取并接收到这条数据唯一的能够代表这条数据的信息,比如主键 代码演示: using Sys ...
- Global Illumination
[Global Illumination] Global Illumination (GI) is a system that models how light is bounced off of s ...
- 第三篇:jmeter的作用域和执行顺序
1.元件的作用域: 8类可执行的元件,testplan和threadgroup不属于可执行的元件:这些元件中,取样器,是典型的不与其他元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其他 ...