云開發(fā) 列表渲染與條件渲染

在數(shù)據(jù)綁定的章節(jié)，我們學(xué)習(xí)了如何渲染數(shù)組類型和對象類型的數(shù)據(jù)，但是當(dāng)時只是輸出了數(shù)組里或?qū)ο蟮臄?shù)組里的某一個數(shù)據(jù)，如果是要輸出整個列表呢？這個時候就需要用到列表渲染啦。

渲染數(shù)組里的所有數(shù)據(jù)

相同的結(jié)構(gòu)是列表渲染的前提

在實際的開發(fā)場景里，商品、新聞、股票、收藏、書架列表等都會有幾千上萬條的數(shù)據(jù)，他們都有一個共同的特征就是數(shù)據(jù)的結(jié)構(gòu)相同，這也是我們可以批量化渲染的前提。還是以前面的互聯(lián)網(wǎng)快訊的數(shù)據(jù)為例，下面的新聞標(biāo)題他們的結(jié)構(gòu)就非常單一。

 data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度達(dá)到門店運營的盈虧平衡點",
      "騰訊：廣告高庫存量還是會持續(xù)到下一年",
      "上汽集團(tuán)云計算數(shù)據(jù)中心落戶鄭州，總投資20億元",
      "京東：月收入超2萬元快遞小哥數(shù)量同比增長163%",
      "騰訊：《和平精英》日活躍用戶已超五千萬",
    ],
  }

那我們應(yīng)該如何把整個列表都渲染出來呢？這里涉及到JavaScript數(shù)組遍歷的知識，JavaScript數(shù)組遍歷的方法非常多，因此小程序數(shù)組的渲染也有很多方法，所以大家看技術(shù)文檔的時候會有點混亂。

技術(shù)文檔：列表索引

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

這里wx:for=”{{newstitle}}”，也就是在數(shù)組newstitle里進(jìn)行循環(huán)，*this代表在 for 循環(huán)中的 item 本身，而{{item}}的item是默認(rèn)的。也可以使用如下方法：

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

默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item；
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

電影列表頁面

首先我們把多部電影的數(shù)據(jù)寫在data里面，相當(dāng)于是一個數(shù)組類型的數(shù)據(jù)里面，包含著多個對象類型的數(shù)據(jù)。

    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: "風(fēng)華絕代。"
      },
      {
        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: "一部美國近現(xiàn)代史。"
      },
      {
        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: "拯救一個人，就是拯救整個世界。"
      },     
    ],

然后我們也把數(shù)據(jù)綁定章節(jié)的代碼改一下，添加一個wx:for語句，來把列表里的數(shù)據(jù)給循環(huán)渲染出來。

<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}}也相應(yīng)的為{{dianying.img}}、{{dianying.name}}、{{dianying.desc}}。為什么這樣？這個也是JavaScript的一個知識，可以先不必深究。

圖片樣式

我們發(fā)現(xiàn)電影列表里面的圖片是變形的，為什么呢？回到我們之前學(xué)的image組件，我們?nèi)ゲ榭匆幌耰mage組件文檔，從技術(shù)文檔里找答案。

技術(shù)文檔：image組件文檔

在技術(shù)文檔里，我們發(fā)現(xiàn)如果我們不寫圖片的模式mode，圖片的模式默認(rèn)為scaleToFill，也就是不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素。

那我們希望圖片保持寬度不變，高度自動變化，保持原圖寬高比不變，那就需要用到widthFix的模式啦。

我們給image組件添加widthFix模式，

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

添加完模式之后，發(fā)現(xiàn)圖片比例顯示正常了，但是image組件出現(xiàn)了溢出的現(xiàn)象，這是因為weui給class為weui-media-box__hd_in-appmsg 的組件定義了一個height:60px的css樣式，也就是限制了高度，那我們可以在home.wxss里添加

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

把這個height:60px給覆蓋掉。

css的覆蓋原理是按照優(yōu)先級來的，越是寫在css文件后面的樣式優(yōu)先級越高，會把前面的給覆蓋掉；在小程序里頁面里的wxss的優(yōu)先級比app.wxss的優(yōu)先級更高，所以也可以覆蓋掉。

點擊電影列表是沒有鏈接的，大家可以回顧前面的知識點，給每部電影添加鏈接，在pages配置項里把每個頁面的路徑都添加上。

Grid九宮格樣式參考

大家經(jīng)常會在App里看到一些分類都是以九宮格的方式來布局的。我們在WeUI小程序里用模擬器找到基礎(chǔ)組件下的grid，看一下grid所呈現(xiàn)的樣式。然后參考WeUI小程序文件結(jié)構(gòu)里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&的標(biāo)簽，這個標(biāo)簽主要是說明里面包含的是一個多節(jié)點的結(jié)構(gòu)塊，換成<view&組件也沒有太大影響，就好像<text&換成<view&沒有影響一樣，用不同的組件主要是為了一個區(qū)分。

然后在home.js添加data數(shù)據(jù)

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: "房產(chǎn)"
      },
      {
        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: "送現(xiàn)金"
      },
    ]

大家就可以看到一個很多App界面都有的一個九宮格了。這里的九宮格是一行三列，如何讓九宮格變成一行五列呢？首先我們要知道為什么這個九宮格會變成一行三列，在weui.wxss里給weui-grid定義了一個width:33.33333333%的樣式，我們可以在home.wxss里添加一個樣式來覆蓋原有的寬度。

.weui-grid{
      width: 20%;
    }

List樣式參考

大家可以先在開發(fā)者工具的模擬器里體驗一下WeUI小程序表單下面的List的樣式，以及找到list樣式所對應(yīng)的wxml代碼，在開發(fā)者工具的文件目錄的example/list目錄下。我們可以參考一下里面的代碼，并結(jié)合前面的案例在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里添加以下數(shù)據(jù)：

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沒有寫內(nèi)容，也是不影響這個列表展示的