Cloud Development List Rendering and Conditional Rendering

In the section on data binding, we learned how to render data for array types and object types, but at that time we were just outputing data from an array or an array of objects, what if we were to output the entire list? This time you need to use list rendering.

Render all the data in the array

The same structure is a prerequisite for list rendering

In the actual development scenario, goods, news, stocks, collections, bookshelf lists, etc. will have thousands of pieces of data, they all have a common feature is the same structure of the data, which is the premise that we can bulk rendering. Or take the data from the previous Internet Newsletter as an example, the following headlines have a very single structure.

 data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点",
      "腾讯：广告高库存量还是会持续到下一年",
      "上汽集团云计算数据中心落户郑州，总投资20亿元",
      "京东：月收入超2万元快递小哥数量同比增长163%",
      "腾讯：《和平精英》日活跃用户已超五千万",
    ],
  }

So how do we render the whole list? There's a lot of knowledge about JavaScript array traversal, so there are a lot of ways to render a small program array, so it's a bit confusing to look at the technical documentation.

Technical documentation: List index

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

Here wx:for "" You can also use the following method:

<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
      {{title}}
    </view>

The underlying variable name of the current item of the default array defaults to index, the variable name of the current item of the array defaults to item;

Movie list page

First of all, we write data from multiple movies in data, which is equivalent to data of an array type, containing data of multiple object types.

    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: "拯救一个人，就是拯救整个世界。"
      },     
    ],

Then we'll change the code for the data binding section and add a wx:for statement to render the data in the list to the loop.

<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>

Here is a wx:for-item, give it a value is dianying.name movies, in fact, can also be other values, such as dianeing, that ,"movies.img", . . . movies.name . W hy is that? This is also a knowledge of JavaScript that you don't have to look into first.

Picture style

We found that the pictures in the movie list are distorted, why? Going back to the image components we learned earlier, let's look at the image component documentation and find out from the technical documentation.

Technical documentation: Image component documentation

In the technical documentation, we found that if we don't write the picture mode, the picture mode defaults to scaleToFill, that is, does not maintain the aspect ratio to zoom the picture, so that the width of the picture is completely stretched to fill the image element.

Then we want the picture to remain the same width, the height changes automatically, keep the original aspect ratio unchanged, then we need to use the widthFix mode.

Let's add widthFix mode to the image component,

<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}"

After adding the pattern, we found that the picture scale appeared normal, but the image component overflowed because weui gave the class a look:60px css style for the weui-media-box__hd_in-appmsg component, which limits the height, which we can add in home.wxss

.weui-media-box__hd_in-appmsg{
      height: auto;
    }

Cover this height: 60px.

The override principle of css is based on priority, the higher the style priority written after the css file, the higher the previous override;

Clicking on the movie list is not linked, you can review the previous knowledge points, add a link to each movie, add the path to each page in the page configuration item.

Grid nine palace style reference

You often see in the app that some of the categories are laid out in nine palaces. W e use the emulator in the WeUI app to find the grid under the underlying components and look at the style that the grid presents. Then refer to the code in the grid page file grid.wxml under the example folder in the WeUI apple file structure and add the code in 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>

In weUI's source code, we see a label that says it contains a multi-node structure block, and that replacing it with a multi-node structure doesn't make much difference, as if it's a different component, just as it doesn't make a difference.

Then add .js data to the home

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: "送现金"
      },
    ]

You can see a lot of app interfaces have a nine palace grid. H ere the nine palace grid is a row of three columns, how to make the nine palace grid into a row of five columns? First of all, we need to know why this nine-miyat grid becomes a row of three columns, in weui.wxss to weui-grid defined a width:33.333333333333% style, we can add a style in home.wxs to cover the original width.

.weui-grid{
      width: 20%;
    }

List style reference

You can first experience the list style below the WeUI applet form in the developer tool simulator, and find the wxml code corresponding to the list style, in the excel/list directory of the developer tool's file directory. We can refer to the code inside and enter the following code in home.wxml in conjunction with the previous example:

<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>

Add the .js data to the data in the home 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:""
    }
    ],

To see the effect again, the first and third descs here are not written and do not affect the display of this list