在数据绑定中学习了如何渲染数组类型和对象类型的数据，但是当时只是输出了数组里或对象的数组里的某一个数据，如果是要输出整个列表呢？这个时候就需要用到列表渲染啦。
1 渲染数组里的所有数据
相同的结构是列表渲染的前提，在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是我们可以批量化渲染的前提。还是以前面的互联网快讯的数据为例，下面的新闻标题他们的结构就非常单一。
data: {
newstitle:[
"瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点",
"腾讯：广告高库存量还是会持续到下一年",
"上汽集团云计算数据中心落户郑州，总投资20亿元",
"京东：月收入超2万元快递小哥数量同比增长163%",
"腾讯：《和平精英》日活跃用户已超五千万",
],
}
那我们应该如何把整个列表都渲染出来呢？这里涉及到JavaScript数组遍历的知识，JavaScript数组遍历的方法非常多，因此小程序数组的渲染也有很多方法，所以大家看技术文档的时候会有点混乱。
技术文档：列表索引
<view wx:for="{
{newstitle}}" wx:key="*this">
{
{item}}
</view>
这里wx:for=”{ {newstitle}}”，也就是在数组newstitle里进行循环，*this 代表在 for 循环中的 item 本身，而{ {item}}的item是默认的。也可以使用如下方法：
<view wx:for-items="{
{newstitle}}" wx:for-item="title" wx:key="*this">
{
{title}}
</view>
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。
2 电影列表页面
首先我们把多部电影的数据写在data里面，相当于是一个数组类型的数据里面，包含着多个对象类型的数据。
movies: [{
name: "肖申克的救赎",
img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
desc:"有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！"},
{
name: "霸王别姬",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
desc: "风华绝代。"
},
{
name: "这个杀手不太冷",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
desc: "怪蜀黍和小萝莉不得不说的故事。"
},
{
name: "阿甘正传",
img: "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.webp",
desc: "一部美国近现代史。"
},
{
name: "美丽人生",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
desc: "最美的谎言。"
},
{
name: "泰坦尼克号",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.webp",
desc: "失去的才是永恒的。"
},
{
name: "千与千寻",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1606727862.webp",
desc: "最好的宫崎骏，最好的久石让。"
},
{
name: "辛德勒名单",
img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.webp",
desc: "拯救一个人，就是拯救整个世界。"
},
],
然后我们也把数据绑定章节的代码改一下，添加一个wx:for语句，来把列表里的数据给循环渲染出来。
<view class="page__bd">
<view class="weui-panel weui-panel_access">
<view class="weui-panel__bd" wx:for="{
{movies}}" wx:for-item="movies" wx:key="*item">
<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb" mode="widthFix" src="{
{movies.img}}" sytle="height:auto"></image>
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">{
{movies.name}}</view>
<view class="weui-media-box__desc">{
{movies.desc}}</view>
</view>
</navigator>
</view>
</view>
</view>
这里用到了一个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 class="weui-media-box__thumb" mode="widthFix" src="{
{movies.img}}"
添加完模式之后，发现图片比例显示正常了，但是image组件出现了溢出的现象，这是因为weui给class为weui-media-box__hd_in-appmsg 的组件定义了一个height:60px的css样式，也就是限制了高度，那我们可以在home.wxss里添加
.weui-media-box__hd_in-appmsg{
height: auto;
}
把这个height:60px给覆盖掉。
css的覆盖原理是按照优先级来的，越是写在css文件后面的样式优先级越高，会把前面的给覆盖掉；在小程序里页面里的wxss的优先级比app.wxss的优先级更高，所以也可以覆盖掉。
点击电影列表是没有链接的，大家可以回顾前面的知识点，给每部电影添加链接，在pages配置项里把每个页面的路径都添加上。
3 Grid九宫格样式参考
大家经常会在App里看到一些分类都是以九宫格的方式来布局的。我们在WeUI小程序里用模拟器找到基础组件下的grid，看一下grid所呈现的样式。然后参考WeUI小程序文件结构里example文件夹下grid页面文件grid.wxml里的代码，在home.wxml里添加代码：
<view class="page__bd">
<view class="weui-grids">
<block wx:for="{
{grids}}" wx:for-item="grid" wx:key="*this">
<navigator url="" class="weui-grid" hover-class="weui-grid_active">
<image class="weui-grid__icon" src="{
{grid.imgurl}}" />
<view class="weui-grid__label">{
{grid.title}}</view>
</navigator>
</block>
</view>
</view>
在WeUI的源代码里，我们看到有一个的标签，这个标签主要是说明里面包含的是一个多节点的结构块，换成组件也没有太大影响，就好像换成没有影响一样，用不同的组件主要是为了一个区分。
然后在home.js添加data数据
grids:[
{ imgurl:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
title:"招聘"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
title: "房产"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
title: "二手车新车"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
title: "二手"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
title: "招商加盟"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
title: "兼职"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
title: "本地"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
title: "家政"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
title: "金币夺宝"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
title: "送现金"
},
]
大家就可以看到一个很多App界面都有的一个九宫格了。这里的九宫格是一行三列，如何让九宫格变成一行五列呢？首先我们要知道为什么这个九宫格会变成一行三列，在weui.wxss里给weui-grid定义了一个width:33.33333333%的样式，我们可以在home.wxss里添加一个样式来覆盖原有的宽度。
.weui-grid{
width: 20%;
}
4 List样式参考
大家可以先在开发者工具的模拟器里体验一下WeUI小程序表单下面的List的样式，以及找到list样式所对应的wxml代码，在开发者工具的文件目录的example/list目录下。我们可以参考一下里面的代码，并结合前面的案例在home.wxml里面输入以下代码：
<view class="weui-cells weui-cells_after-title">
<block wx:for="{
{listicons}}" wx:for-item="listicons">
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<image src="{
{listicons.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
</view>
<view class="weui-cell__bd">{
{listicons.title}}</view>
<view class="weui-cell__ft weui-cell__ft_in-access">{
{listicons.desc}}</view>
</navigator>
</block>
</view>
在home.js的data里添加以下数据：
listicons:[{
icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons1.png",
title:"我的文件",
desc:""
},
{
icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons2.png",
title:"我的收藏",
desc:"收藏列表"
},
{
icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons3.png",
title:"我的邮件",
desc:""
}],
再来查看效果，这里第一个和第三个的desc没有写内容，也是不影响这个列表展示的。