在数据绑定的章节，我们学习了如何渲染数组类型和对象类型的数据，但是当时只是输出了数组里或对象的数组里的某一个数据，如果是要输出整个列表呢？这个时候就需要用到列表渲染啦。
相同的结构是列表渲染的前提
在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是我们可以批量化渲染的前提。还是以前面的互联网快讯的数据为例，下面的新闻标题他们的结构就非常单一。
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 可以指定数组当前下标的变量名。
首先我们把多部电影的数据写在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://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.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配置项里把每个页面的路径都添加上。
大家经常会在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的源代码里，我们看到有一个<block>的标签，这个标签主要是说明里面包含的是一个多节点的结构块，换成<view>组件也没有太大影响，就好像<text>换成<view>没有影响一样，用不同的组件主要是为了一个区分。
然后在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%;
}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没有写内容，也是不影响这个列表展示的