微信小程序 循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <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,进 ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
随机推荐
- Linux命令:history
显示历史(执行过的)命令. history [n] history -c history -d offset history -anrw [filename] history -p arg [arg ...
- Haskell语言学习笔记(89)Unicode UTF8
unicode-show $ cabal install unicode-show Installed unicode-show-0.1.0.2 Prelude> :m +Text.Show.U ...
- vmware搭建lnmp环境配置域名
找到nginx配置文件,修改server_name 然后找到/etc/hosts文件 修改成如下 之后在Windows本地的C盘的hosts文件中添加解析 好了,这样就可以访问了 通往牛逼的路上,在意 ...
- [C语言]逆序的三位数
---------------------------------------------------------------------------------------- // main.c ...
- split()方法解析
split()方法用于将字符串分割为字符串数组. 废话不多说,直接贴代码: var str="How are you doing today?" console.log(str.s ...
- stringBuffer和stringBulider的区别
今天去面试了,问了最基础的stringBuffer和stringBulider的区别,我没有回答出来.之前就知道自己的基础很差,没想到这么差. 网上看了一下资料,stringBuffer和string ...
- webpack相关配置
cd 项目文件夹 npm init -y npm install jquery -S //生成node_modules 下载好jquery 创建webpack.config.js module.exp ...
- servlet 3.1 摘录
https://www.oschina.net/translate/non-blocking-io-using-servlet-3-1?cmp 非阻塞IO AsyncContext context = ...
- elastastic search
curl -X PUT "10.97.184.40:9200/logstash-2015.05.18" -H 'Content-Type: application/json' -d ...
- Java http请求工具类
该工具类可以调用POST请求或者Get请求,参数以Map的方式传入,支持获获取返回值,返回值接收类型为String HttpRequestUtil.java package com.util; imp ...