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

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

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

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

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

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

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

技術(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)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item；
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

電影列表頁(yè)面

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

    movies: [{
      name: "肖申克的救贖", 
      img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc:"有的人的羽翼是如此光輝，即使世界上最黑暗的牢獄，也無(wú)法長(zhǎng)久地將他圍困！"},
      {
        name: "霸王別姬",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
        desc: "風(fēng)華絕代。"
      },
      {
        name: "這個(gè)殺手不太冷",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
        desc: "怪蜀黍和小蘿莉不得不說(shuō)的故事。"
      },
      {
        name: "阿甘正傳",
        img: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.webp",
        desc: "一部美國(guó)近現(xiàn)代史。"
      },
      {
        name: "美麗人生",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
        desc: "最美的謊言。"
      },
      {
        name: "泰坦尼克號(hào)",
        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: "拯救一個(gè)人，就是拯救整個(gè)世界。"
      },     
    ],

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

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

這里用到了一個(gè)wx:for-item，給了它一個(gè)值是movies，其實(shí)也可以是其他值，比如dianying，那{{movies.img}}、{{movies.name}}、{{movies.desc}}也相應(yīng)的為{{dianying.img}}、{{dianying.name}}、{{dianying.desc}}。為什么這樣？這個(gè)也是JavaScript的一個(gè)知識(shí)，可以先不必深究。

圖片樣式

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

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

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

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

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

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

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

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

把這個(gè)height:60px給覆蓋掉。

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

點(diǎn)擊電影列表是沒(méi)有鏈接的，大家可以回顧前面的知識(shí)點(diǎn)，給每部電影添加鏈接，在pages配置項(xiàng)里把每個(gè)頁(yè)面的路徑都添加上。

Grid九宮格樣式參考

大家經(jīng)常會(huì)在App里看到一些分類(lèi)都是以九宮格的方式來(lái)布局的。我們?cè)赪eUI小程序里用模擬器找到基礎(chǔ)組件下的grid，看一下grid所呈現(xiàn)的樣式。然后參考WeUI小程序文件結(jié)構(gòu)里example文件夾下grid頁(yè)面文件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的源代碼里，我們看到有一個(gè)<block&的標(biāo)簽，這個(gè)標(biāo)簽主要是說(shuō)明里面包含的是一個(gè)多節(jié)點(diǎn)的結(jié)構(gòu)塊，換成<view&組件也沒(méi)有太大影響，就好像<text&換成<view&沒(méi)有影響一樣，用不同的組件主要是為了一個(gè)區(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: "二手車(chē)新車(chē)"
      },
      {
        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)金"
      },
    ]

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

.weui-grid{
      width: 20%;
    }

List樣式參考

大家可以先在開(kāi)發(fā)者工具的模擬器里體驗(yàn)一下WeUI小程序表單下面的List的樣式，以及找到list樣式所對(duì)應(yīng)的wxml代碼，在開(kāi)發(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:""
    }
    ],

再來(lái)查看效果，這里第一個(gè)和第三個(gè)的desc沒(méi)有寫(xiě)內(nèi)容，也是不影響這個(gè)列表展示的