蝙蝠岛资源网

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

前言：

微信小程序的循环实现，通过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 " 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
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com