微信小程序云开发教程-WXML入门-列表渲染
发布于 4 年前 作者 zhangjie 1504 次浏览 来自 分享

同学们大家好,我是小伊同学,今天我们将要一起来学习WXML部分的列表渲染。


  在上一节中,我们学习了数据绑定,它能够帮助我们在界面中展示动态的数据。但是,仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else 条件控制, for 循环等控制能力。在小程序里边,这些控制能力都用 wx: 开头的属性来表达。这就是我们本小节要讲的列表渲染和下一节为大家介绍的条件渲染。


  首先,我们来看列表渲染。


  我们先设想一下,当我们需要在前端以固定样式重复展示多条数据时,我们应该如何编写wxml代码?



  比如右图所示我们即将开发的字典小程序的首页,在最新热词部分展示了很多项词语,这些词语每条的样式基本一样,只不过内容和数字这些数据不同。


  同时,这里的数据条目的个数也可能是不确定的,即使我们想要把每条词语都在wxml中写上一遍,也是无法操作的。在这样的情况下,我们就需要用到列表渲染了。列表渲染本质上也是一种数据绑定


  通过给组件加上 wx:for 这样的控制属性,就能够使这一组件及其内部的全部内容重复出现,而该属性的属性值需要被设置为数组变量,使用我们上一节讲过的数据绑定。这样就能使得该组件依照此数组进行重复渲染


  数组的长度决定了渲染次数,即最终有几条一样的样式。


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



  大家可以看到上面这个例子,array为数组,数组长度为2,下标分别为0和1,每一个数组元素为一个json,json中只有一个键值对,即message字段。


  因此我们在展示的时候将array放在双重花括号中,在view的内容中,我们写入了数组下标的默认变量名index,和数组元素中的message字段,item就代表了数组中的一项元素,通过json的访问语法我们知道,使用item点加上字段名就可以在屏幕上展示出这一value值。最终展示的结果如效果图所示。


  关于列表渲染还有 block 和 wx:key 两种用法,同学们可以根据开发者文档自学。


  日拱一卒,功不唐捐。涓流所积,终成沧海。

回到顶部