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

2020-07-20 11:21 更新

在數(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)就非常單一。

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

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

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

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

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

  1. <view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  2.       {{title}}
  3.     </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ù)。

  1.     movies: [{
  2.       name: "肖申克的救贖", 
  3.       img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
  4.       desc:"有的人的羽翼是如此光輝，即使世界上最黑暗的牢獄，也無法長久地將他圍困！"},
  5.       {
  6.         name: "霸王別姬",
  7.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
  8.         desc: "風(fēng)華絕代。"
  9.       },
  10.       {
  11.         name: "這個殺手不太冷",
  12.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
  13.         desc: "怪蜀黍和小蘿莉不得不說的故事。"
  14.       },
  15.       {
  16.         name: "阿甘正傳",
  17.         img: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.webp",
  18.         desc: "一部美國近現(xiàn)代史。"
  19.       },
  20.       {
  21.         name: "美麗人生",
  22.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
  23.         desc: "最美的謊言。"
  24.       },
  25.       {
  26.         name: "泰坦尼克號",
  27.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.webp",
  28.         desc: "失去的才是永恒的。"
  29.       },
  30.       {
  31.         name: "千與千尋",
  32.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1606727862.webp",
  33.         desc: "最好的宮崎駿，最好的久石讓。"
  34.       },
  35.       {
  36.         name: "辛德勒名單",
  37.         img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.webp",
  38.         desc: "拯救一個人，就是拯救整個世界。"
  39.       },     
  40.     ],

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

  1. <view class="page__bd">
  2.         <view class="weui-panel weui-panel_access">
  3.             <view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movies" wx:key="*item">
  4.                 <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
  5.                     <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
  6.                         <image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
  7.                     </view>
  8.                     <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
  9.                         <view class="weui-media-box__title">{{movies.name}}</view>
  10.                         <view class="weui-media-box__desc">{{movies.desc}}</view>
  11.                     </view>
  12.                 </navigator>
  13.             </view>
  14.         </view>
  15.     </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模式，

  1. <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里添加

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

把這個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里添加代碼：

  1. <view class="page__bd">
  2.         <view class="weui-grids">
  3.             <block wx:for="{{grids}}" wx:for-item="grid" wx:key="*this">
  4.                 <navigator url="" class="weui-grid" hover-class="weui-grid_active">
  5.                     <image class="weui-grid__icon" src="{{grid.imgurl}}" />
  6.                     <view class="weui-grid__label">{{grid.title}}</view>
  7.                 </navigator>
  8.             </block>
  9.         </view>
  10.     </view>

在WeUI的源代碼里，我們看到有一個<block&的標(biāo)簽，這個標(biāo)簽主要是說明里面包含的是一個多節(jié)點的結(jié)構(gòu)塊，換成<view&組件也沒有太大影響，就好像<text&換成<view&沒有影響一樣，用不同的組件主要是為了一個區(qū)分。

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

  1. grids:[
  2.       { imgurl:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
  3.         title:"招聘"
  4.       },
  5.       {
  6.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
  7.         title: "房產(chǎn)"
  8.       },
  9.       {
  10.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
  11.         title: "二手車新車"
  12.       },
  13.       {
  14.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
  15.         title: "二手"
  16.       },
  17.       {
  18.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
  19.         title: "招商加盟"
  20.       },
  21.       {
  22.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
  23.         title: "兼職"
  24.       },
  25.       {
  26.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
  27.         title: "本地"
  28.       },
  29.       {
  30.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
  31.         title: "家政"
  32.       },
  33.       {
  34.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
  35.         title: "金幣奪寶"
  36.       },
  37.       {
  38.         imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
  39.         title: "送現(xiàn)金"
  40.       },
  41.     ]

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

  1. .weui-grid{
  2.       width: 20%;
  3.     }

List樣式參考

大家可以先在開發(fā)者工具的模擬器里體驗一下WeUI小程序表單下面的List的樣式，以及找到list樣式所對應(yīng)的wxml代碼，在開發(fā)者工具的文件目錄的example/list目錄下。我們可以參考一下里面的代碼，并結(jié)合前面的案例在home.wxml里面輸入以下代碼：

  1. <view class="weui-cells weui-cells_after-title">
  2.         <block wx:for="{{listicons}}" wx:for-item="listicons">
  3.             <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  4.                 <view class="weui-cell__hd">
  5.                     <image src="{{listicons.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  6.                 </view>
  7.                 <view class="weui-cell__bd">{{listicons.title}}</view>
  8.                 <view class="weui-cell__ft weui-cell__ft_in-access">{{listicons.desc}}</view>
  9.             </navigator>
  10.         </block>
  11.     </view>

在home.js的data里添加以下數(shù)據(jù)：

  1. listicons:[{
  2.       icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons1.png",
  3.       title:"我的文件",
  4.       desc:""
  5.     },
  6.     {
  7.       icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons2.png",
  8.       title:"我的收藏",
  9.       desc:"收藏列表"
  10.     },
  11.     {
  12.       icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons3.png",
  13.       title:"我的郵件",
  14.       desc:""
  15.     }
  16.     ],

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

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號