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

网络编程 2024/12/29 佚名

3 2 1

前言：

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

1 wx:for

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

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

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-items，在上面的例子里面用于数组，也同时用于外层的单循环。

【案】

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

分析一下，

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

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

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

2.2 wx:for-item

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

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

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

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

3 wx:key

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

摘取一段定义的描述，

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

字符串

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

保留关键字 *this

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

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

通配符+名字

例如 *item

4 嵌套的应用

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

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

<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 " bindtap="kindToggle">
   <view class="kind-list-text">{{item.name}}</view>
   <image class="kind-list-img" src="/UploadFiles/2021-04-02/{{item.id}}.png">

从这段代码里面，我们看到， 针对上面这个比较复杂的数据结构，在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"external nofollow" target="_blank" href="https://blog.csdn.net/u013338742/article/details/78785918">https://blog.csdn.net/u013338742/article/details/78785918

小程序,wx:for,wx:for-items,wx:key

标签：

小程序,wx:for,wx:for-items,wx:key

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年12月29日

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

小程序,wx:for,wx:for-items,wx:key

jQuery 淡入/淡出效果函数用法分析

微信小程序使用GoEasy实现websocket实时通讯

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接