列表渲染与条件渲染

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

渲染数组里的所有数据

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

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

 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组件文档，从技术文档里找答案。

在技术文档里，我们发现如果我们不写图片的模式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配置项里把每个页面的路径都添加上。

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的源代码里，我们看到有一个<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没有写内容，也是不影响这个列表展示的

列表渲染与条件渲染

列表渲染与条件渲染

渲染数组里的所有数据

电影列表页面

图片样式

Grid九宫格样式参考

List样式参考

选择支付方式：