微信小程序云开发教程-WXML入门-列表渲染

同学们大家好，我是小伊同学，今天我们将要一起来学习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 两种用法，同学们可以根据开发者文档自学。

 

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

 

想看视频版？

关注公号“微程序学堂”，我们的视频教程即将上线

 

如果你自己写了好文章想投稿

请联系我们