首页 > 技术连载 > 正文

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

来源:卓象IT实训基地【原创】 时间:2018-11-08

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


1. wx:for

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

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

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

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

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

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


编译预览:

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


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

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


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

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


编译预览:

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


注意:

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

<swiper-item wx:for="{{swiperData}}" wx:for-item="itm">

{{itm.text}}

</swiper-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可以指定数组当前下标的变量名:

<swiper-item wx:for="{{swiperData}}" wx:for-index="idx" >

{{idx}} : {{itm.text}}

</swiper-item>

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


4. block标签

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

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

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


编译预览:

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


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


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

下一篇文章讲解“小程序列表渲染”

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


声明:文章为原创文章,转载文章需联系本头条号,谢谢合作

上一篇: 「小程序入门连载十四」小程序设置及获取数据
下一篇: 「小程序开发连载十六」小程序全国物流查询