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

1 wx: for
the example of the current look, wx: for the use of the array to do indeed, the reference micro-channel sample program icon.

 

 

Examples of which are the conditions for determining the array, is a typical example iconsizejius array.

 

 

 

 

2 wx: for-items and wx: for-Item
2.1 wx: for-items
now look wx: for-items, and wx: for ratio, wx: for-items What difference will it make?

[Case] ​​I believe that wx: for-items should be inclusive wx: for, rather than as some friends say, wx: for a single cycle of the array, and wx: for-items for a multi-level nested loop.

 

 

 

 Obviously, wx: for-items, which in the example above for the array, and also for the outer layer single cycle.

【case】

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

Analyze,

wx: for-items first point to the array array,

 

 

 

After, wx: for-items select the item, for further circulation STEPS,

We see an item array that contains two properties,

 

 

 

WX 2.2: Item for-
WX: for-Item Note wx: for-items less than S, wx: for-item only major element of the project cycle array (item in array) renamed here

Array elements are herein denoted substituted item.

 

 

 

 Is just an example, see the right now, item is used to set the inside of the loop,

 

 

 

Then render to implement multiple elements within the array

 

 

3 wx: key
 wx: key is micro-channel loop function of a promotion, the software compile time, micro-channel will prompt you with wx: key project to stabilize the view layer of the display.

 

 

 

摘取 一段定义的描述,

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

原文链接:https://blog.csdn.net/yellow_hill/article/details/81273828

Guess you like

Origin www.cnblogs.com/wen-/p/12134660.html