小程序之列表渲染

153 阅读2分钟

block标签

某些情况下,我们需要使用 wx:if 或 wx:for时,可能需要包裹一组组件标签。我们希望对这一组组件标签进行整体的操作,这个时候我们可以使用block标签。 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

使用block有两个好处:

(1)将需要进行遍历或者判断的内容进行包裹。

(2)将遍历和判断的属性放在block便签中,不影响普通属性的阅读,提高代码的可读性。

列表渲染

item/index名称

默认情况下,item – index的名字是固定的。但是某些情况下,我们可能想使用其他名称,或者当出现多层遍历时,名字会重复。这个时候,我们可以指定item和index的名称。

image.png

key作用

我们看到,使用wx:for时,会报一个警告,这个提示告诉我们,可以添加一个key来提供性能。为什么需要这个key属性呢?这个其实和小程序内部也使用了虚拟DOM有关系(和Vue、React很相似)。当某一层有很多相同的节点时,也就是列表节点时,我们希望插入、删除一个新的节点,可以更好的复用节点。

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

  • 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  • 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。不能是对象,对象会转换成字符串[Object Object],形式是一样的,不能提高性能。

image.png