小程序入门连载十五之小程序列表渲染

上一篇文章讲解“小程序设置及获取数据”,本篇文章讲解“小程序列表渲染”。

1. wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。

循环展示一个swiper(滑块视图容器)。

在界面层(wxml)中展示swiper(tst.wxml)

以下仅展示内容作为示例,可以展示图片等,展示图片只需在swiper-item标签下添加image标签即可。

编译预览:

在交互层(js)data中定义swiper展示的动态数据

将数据在界面层(wxml)中动态循环展示

编译预览:

注意:

1. 默认数组当前项的变量名默认为item,使用wx:for-item可以指定数组当前元素的变量名。

{}

2. wx:key

在编译预览时,在控制台会看到有一个警告。

现在,您可以为“wx:for”添加“wx:key”,以提高性能。

wx:key的作用:

例如循环渲染了很多数据,一个页面很长一屏幕展示不下,当向下看时,需要不断的渲染数据,需要与渲染过的数据做一个结合,wx:key的作用就是作为是否渲染过的标识,如果没用wx:key,无法辨别是否渲染过,数据从头开始渲染,如果页面数据多就会加载的很慢。

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

1)字符串,代表在for循环的array中item的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变(如主键)。

2)保留关键字,*this代表在for循环中的item本身,这种表示需要item本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

在界面层(wxml)添加wx:key,id作为key的值。

编译预览:

3. 索引——index

在tst.wxml中输出索引

编译预览:

注意:

1. 默认数组的当前项的下标变量名默认为index,使用wx:for-index可以指定数组当前下标的变量名:

{} : {}

2. 索引从0开始,也可以作为wx:key的值。

4. block标签

有时在展示数据时,只要数据,不需要标签,像在swiper-item标签上循环时,swiper-item标签也会生成,不需要展示标签时使用block标签。

在界面层使用block标签循环数据(tst.wxml)

编译预览:

关注卓象程序员,定期发布技术文章

下一篇文章讲解“全国物流查询+小程序API”

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180726A0EXM400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券