【小程序开发教程系列13】入门篇之小程序列表渲染

今天春哥技术团队大东继续为大家更新关于小程序开发教程的系列文章,上一篇文章讲解“小程序设置及获取数据”,本篇文章讲解“小程序列表渲染”。

1. wx:for

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

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

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

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

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

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

编译预览:

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

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

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

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

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

编译预览:

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

注意:1. 默认数组当前项的变量名默认为item,使用wx:for-item可以指定数组当前元素的变量名。<swiper-item wx:for="{{swiperData}}" wx:for-item="itm">{{itm.text}}</swiper-item>

2. wx:key

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

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

现在,您可以为“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的值。

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

编译预览:

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

3. 索引——index

①在tst.wxml中输出索引

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

编译预览:

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

注意: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)

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

编译预览:

「<a href=https://www.cgtblog.com/e/tags/?tagid=1079 target=_blank class=infotextkey>微信小程序</a>入门连载十五」小程序列表渲染

春哥团队独家打造的春哥小程序开发平台V1.2源码系统已经正式发布了,功能强大,用此款源码系统可以分分钟搭建出强大的小程序开发平台,无需编程,小白也可以开发小程序,轻轻松松接单赚钱

 
来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:【小程序开发教程系列12】入门篇之小      下一篇:微信小程序中如何渲染HTML内容?