首页 | 编程 | Java

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

2020年05月19日 作者：Franklin原文

前言：

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

1 wx:for

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

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 选取了item，做进一步的循环STEPS，

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

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

3  wx:key

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

当数据改变触发渲染层重新渲染的时候，会校正带有 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 ? '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内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接