微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key
发布时间:2019-10-16 点击:

1 wx:for

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

20180729200349583.png


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

20180729200510243.png


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用于可嵌套的多级循环。


2018072920130555.png


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

【案】

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

分析一下,

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


20180729202631267.png


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


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

2018072920284632.png



2.2 wx:for-item

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


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

2018072920130555.png

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

2018072920401864.png


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

20180729204333768.png


3  wx:key

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

20180729200610281.png


摘取 一段定义的描述,


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

字符串

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


保留关键字 *this

代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如: 

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。


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


通配符+名字 

例如 *item


 4 嵌套的应用

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

20180729204912107.png


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

20180729205029834.png


 <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,大概是为了避免误解,导致,微信团队,又加了这一个功能,个人觉得有点多余。



服务热线