列表渲染与条件渲染

在数据绑定的章节，我们学习了如何渲染数组类型和对象类型的数据，但是当时只是输出了数组里或对象的数组里的某一个数据，如果是要输出整个列表呢？这个时候就需要用到列表渲染啦。

渲染数组里的所有数据

相同的结构是列表渲染的前提

在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是我们可以批量化渲染的前提。还是以前面的互联网快讯的数据为例，下面的新闻标题他们的结构就非常单一。

那我们应该如何把整个列表都渲染出来呢？这里涉及到JavaScript数组遍历的知识，JavaScript数组遍历的方法非常多，因此小程序数组的渲染也有很多方法，所以大家看技术文档的时候会有点混乱。

技术文档：列表索引

这里wx:for=”{{newstitle}}”，也就是在数组newstitle里进行循环，*this代表在 for 循环中的 item 本身，而{{item}}的item是默认的。也可以使用如下方法：

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

电影列表页面

首先我们把多部电影的数据写在data里面，相当于是一个数组类型的数据里面，包含着多个对象类型的数据。

然后我们也把数据绑定章节的代码改一下，添加一个wx:for语句，来把列表里的数据给循环渲染出来。

这里用到了一个wx:for-item，给了它一个值是movies，其实也可以是其他值，比如dianying，那{{movies.img}}、{{movies.name}}、{{movies.desc}}也相应的为{{dianying.img}}、{{dianying.name}}、{{dianying.desc}}。为什么这样？这个也是JavaScript的一个知识，可以先不必深究。

图片样式

我们发现电影列表里面的图片是变形的，为什么呢？回到我们之前学的image组件，我们去查看一下image组件文档，从技术文档里找答案。

技术文档：image组件文档

在技术文档里，我们发现如果我们不写图片的模式mode，图片的模式默认为scaleToFill，也就是不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

那我们希望图片保持宽度不变，高度自动变化，保持原图宽高比不变，那就需要用到widthFix的模式啦。

我们给image组件添加widthFix模式，

添加完模式之后，发现图片比例显示正常了，但是image组件出现了溢出的现象，这是因为weui给class为weui-media-box__hd_in-appmsg 的组件定义了一个height:60px的css样式，也就是限制了高度，那我们可以在home.wxss里添加

把这个height:60px给覆盖掉。

css的覆盖原理是按照优先级来的，越是写在css文件后面的样式优先级越高，会把前面的给覆盖掉；在小程序里页面里的wxss的优先级比app.wxss的优先级更高，所以也可以覆盖掉。

点击电影列表是没有链接的，大家可以回顾前面的知识点，给每部电影添加链接，在pages配置项里把每个页面的路径都添加上。

Grid九宫格样式参考

大家经常会在App里看到一些分类都是以九宫格的方式来布局的。我们在WeUI小程序里用模拟器找到基础组件下的grid，看一下grid所呈现的样式。然后参考WeUI小程序文件结构里example文件夹下grid页面文件grid.wxml里的代码，在home.wxml里添加代码：

在WeUI的源代码里，我们看到有一个<block>的标签，这个标签主要是说明里面包含的是一个多节点的结构块，换成<view>组件也没有太大影响，就好像<text>换成<view>没有影响一样，用不同的组件主要是为了一个区分。

然后在home.js添加data数据

大家就可以看到一个很多App界面都有的一个九宫格了。这里的九宫格是一行三列，如何让九宫格变成一行五列呢？首先我们要知道为什么这个九宫格会变成一行三列，在weui.wxss里给weui-grid定义了一个width:33.33333333%的样式，我们可以在home.wxss里添加一个样式来覆盖原有的宽度。

List样式参考

大家可以先在开发者工具的模拟器里体验一下WeUI小程序表单下面的List的样式，以及找到list样式所对应的wxml代码，在开发者工具的文件目录的example/list目录下。我们可以参考一下里面的代码，并结合前面的案例在home.wxml里面输入以下代码：

在home.js的data里添加以下数据：

再来查看效果，这里第一个和第三个的desc没有写内容，也是不影响这个列表展示的