微信小程序wx:for循环的实例详解


Posted in Javascript onOctober 07, 2018

列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

Page({
 data: {
  array: [{
   message: 'foo',
  }, {
   message: 'bar'
  }]
 }
})

使用 wx:for-item 可以指定数组当前元素的变量名,

使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
 {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套,下边是一个九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
  <view wx:if="{{i <= j}}">
   {{i}} * {{j}} = {{i * j}}
  </view>
 </view>
</view>

block wx:for

类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: </view>
 <view> {{item}} </view>
</block>

wx:key

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

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

字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
示例代码:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
 data: {
  objectArray: [
   {id: 5, unique: 'unique_5'},
   {id: 4, unique: 'unique_4'},
   {id: 3, unique: 'unique_3'},
   {id: 2, unique: 'unique_2'},
   {id: 1, unique: 'unique_1'},
   {id: 0, unique: 'unique_0'},
  ],
  numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
  const length = this.data.objectArray.length
  for (let i = 0; i < length; ++i) {
   const x = Math.floor(Math.random() * length)
   const y = Math.floor(Math.random() * length)
   const temp = this.data.objectArray[x]
   this.data.objectArray[x] = this.data.objectArray[y]
   this.data.objectArray[y] = temp
  }
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addToFront: function(e) {
  const length = this.data.objectArray.length
  this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addNumberToFront: function(e){
  this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
  this.setData({
   numberArray: this.data.numberArray
  })
 }
})

注意:

当 wx:for 的值为字符串时,会将字符串解析成字符串数组

<view wx:for="array">
 {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
 {{item}}
</view>

注意: 花括号和引号之间如果有空格,将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
 {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
 {{item}}
</view>

总结

以上所述是小编给大家介绍的微信小程序wx:for循环,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
js实现移动端轮播图
Dec 21 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 #Javascript
Vue面试题及Vue知识点整理
Oct 07 #Javascript
解决vue无法设置滚动位置的问题
Oct 07 #Javascript
cdn模式下vue的基本用法详解
Oct 07 #Javascript
vue实现添加与删除图书功能
Oct 07 #Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 #Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 #Javascript
You might like
php学习笔记之面向对象编程
2012/12/29 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
在Python中COM口的调用方法
2019/07/03 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
自荐信范文
2013/12/10 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
施工安全承诺书
2014/05/22 职场文书
横店影视城导游词
2015/02/06 职场文书
生日祝酒词大全
2015/08/10 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS