微信小程序 循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <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,进 ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
随机推荐
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- PHP脚本不报错的两点原因
-------------------------------------------------------------------------------------------------- P ...
- 16.监听器-基础.md
目录 概念 监听器功能 监听创建或销毁 监听属性变化 session相关监听 概念 实现特定接口的普通java类 *监听特定对象的创建.销毁或属性变化: 对象自己创建自己用:无需监听 对象别人创建自己 ...
- python脚本
python源码编译 python -O -m py_compile file.py [root@localhost python]# cat dbass.py #!/usr/local/bin/py ...
- Windows 10 显示中的仅更改文本大小和加粗选项
问题描述: 在Windows 10 1703 之前的版本,在控制面板-显示中,存在如下图中的图形界面设置: 系统升级到Windows 10 1703 或是Windows 10 1709 之后,不再存在 ...
- 03_java基础(六)之CRUD实现
1.简单实现 package com.day01.station.dao; /** * Created by Administrator on 2018/2/1. */ import java.sql ...
- MVC005之页面调用控制器中的方法
描述:控制器在传给页面数据时,有时我们需要对传过来的数据进行二次处理 如: 1:传过来部门编码,但页面上要显示为部门名称 2:格式转换等 我们在写aspx时一般在cs文件中写一个protected的方 ...
- jms版本
Java消息服务是一个在 Java标准化组织(JCP)内开发的标准(代号JSR 914). 2001年6月25日,Java消息服务发布JMS 1.0.2b,2002年3月18日Java消息服务发布 1 ...
- Linux 学习总结(二)
一.用户与用户组管理 1.添加用户 useradd 选项 用户名 -c 指定一段注释性描述 -d 目录,指定用户目录,若目录不存在,-m 选项可以创建目录 -g 指定用户所属用户组 -s 指定用户登陆 ...
- xnconvert 图片转换工具
xnconvert是一款简单高效的图片转换工具.xnconvert能够批量地进行图片格式转换,并具有一定的图片处理功能,可以增加水印.特效,支持放大缩小.旋转等. xnconvert功能介绍: 你可以 ...