微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法


Posted in Javascript onMay 19, 2020

前言:

微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢?

1 wx:for

从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

示例里面都是对数组进行条件判断,比如iconsizejius就是一个典型的数组。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2 wx:for-items 与wx:for-item

2.1 wx:for-items

现在看wx:for-items, 和wx:for比,wx:for-items有什么不同呢?

【案】笔者认为wx:for-items应该可以包容wx:for,而不是像有些朋友说,wx:for用于数组的单循环,而wx:for-items用于可嵌套的多级循环。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

 很显然,wx:for-items,在上面的例子里面用于数组,也同时用于外层的单循环。

【案】

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

分析一下,

wx:for-items首先指向了数组array,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

之后,wx:for-items 选取了item,做进一步的循环STEPS,

我们看到array的一个item包含两个属性,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2.2 wx:for-item

wx:for-item注意wx:for-items比少了S,wx:for-item主要只是对循环项目数组的元素(item in array)重新命名,这里

这里array的元素被item取代来表示。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

 还是刚才的例子,现在看右边,item被用于对循环内体的设置,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

然后实现对数组内多个元素的渲染

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

3  wx:key

 wx:key是对微信循环功能的一次提升,在软件编译的时候,微信会提示你是用 wx:key来稳定视图层的项目显示。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

摘取 一段定义的描述,

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

  • 字符串

代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。 

  • 保留关键字 *this

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

一般是指定一个唯一的字段(类似于id的定义);

  • 通配符+名字 

例如 *item

 4 嵌套的应用

上面的例子都比较简单,只有一层或者一个属性的嵌套,现在看一个复杂一点的,例子,来源于官方的组件展示程序。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

这是一个多级菜单的展示,用户点击后,会展开三个选项,而每一个选项对应一个页面,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

<view class="index-bd">
 <view class="kind-list">
  <block wx:for-items="{{list}}" wx:key="{{item.id}}">
  <view class="kind-list-item">
   <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
   <view class="kind-list-text">{{item.name}}</view>
   <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
   </view>
   <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
   <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
    <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
    <navigator url="pages/{{page}}/{{page}}" class="navigator">
     <view class="navigator-text">{{page}}</view>
     <view class="navigator-arrow"></view>
    </navigator>
    </block>
   </view>
   </view>
  </view>
  </block>
 </view>
 </view>

从这段代码里面,我们看到, 针对上面这个比较复杂的数据结构,在block tag里面(有两层block)

先对list,用wx:for-items,

<block wx:for-items="{{list}}" wx:key="{{item.id}}">

做最外层循环,这里list里面的数组元素,就变为item了,item有4个属性,其中一个是pages,

【注意】这里wx:for-items和wx:for的不同就是,wx:for-items默认的循环项为item,不需要指定了。所以,第二层循环的item,解释器已经理解了,现在item下面的pages,依旧是一个数组,我们可以在嵌套来遍历他。

<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

然后,用wx:for-items,对list里面的pages属性内嵌数组做了遍历循环,注意,后面又立即跟了wx:for-item="page",注意,这里没有s,就是对item的元素pages数组的元素重新命名为page了,后面的page操作,就是对这个内嵌数组操作。这里wx:for-item的命名其实是一个可选项,如果不命名,默认就是item,也就是嵌套的循环下标也是item,大概是为了避免误解,导致,微信团队,又加了这一个功能,个人觉得有点多余。

参考:

1小程序wx:for、wx:for-items和wx:for-item的正确用法

https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=wx%3Afor

2 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用

https://blog.csdn.net/u013338742/article/details/78785918

到此这篇关于微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法的文章就介绍到这了,更多相关小程序 wx:for wx:for-items wx:key内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 #Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
通过js随机函数Math.random实现乱序
May 19 #Javascript
javascript实现获取中文汉字拼音首字母
May 19 #Javascript
微信小程序实现菜单左右联动
May 19 #Javascript
JS array数组检测方式解析
May 19 #Javascript
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php生成RSS订阅的方法
2015/02/13 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
vue组件tabbar使用方法详解
2018/11/06 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
教师正风肃纪剖析材料
2014/10/20 职场文书
项目安全员岗位职责
2015/02/15 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书