微信小程序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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
jquery each()源代码
Feb 14 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
angular共享依赖的解决方案分享
Oct 15 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面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
easyui validatebox验证
2016/04/29 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python实现学生管理系统
2018/01/11 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Django的性能优化实现解析
2019/07/30 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
就业协议书
2014/09/12 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
mysql insert 存在即不插入语法说明
2022/03/25 MySQL