微信小程序开发7-列表渲染与条件渲染

本文来源于腾讯云官方小程序培训营

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

渲染数组里的所有数据

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

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

 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配置项里把每个页面的路径都添加上。

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%;
}

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没有写内容,也是不影响这个列表展示的

标签: none

添加新评论