富力丹麥小鎮P20-602的春天

一、對象數組

很多情況下，我們需要多次顯示同一個條目(item)，或者說是某個類的不同實例對象。類似如下：

那么，你可以寫很復雜的WXML，“手工”地為每個對象書寫一塊WXML，顯示一個對象，向下面這個代碼：

<view?class="allbody-flex">

??<view?class="title">?TOMMY游記?view>

??<view?class="bodyone-flex">

????<view?class="unit">

??????<image?class="img"?mode="widthFix"?src="../../image/natrue1.png">image>

??????<view?class="slogan">大好河山view>

??????<view?class="price">門票view>

????view>

????<view?class="unit">

??????<image?class="img"?mode="widthFix"?src="../../image/natrue2.png">image>

????????<view?class="slogan">原始森林view>

??????<view?class="price">門票view>

????view>

????<view?class="unit">

??????<image?class="img"?mode="widthFix"?src="../../image/natrue3.png">?image>

??????????<view?class="slogan">無限原野view>

??????<view?class="price">門票view>

????view>

????<view?class="unit">

??????<image?class="img"?mode="widthFix"?src="../../image/natrue4.png">?image>

??????????<view?class="slogan">藍天綠草view>

??????<view?class="price">門票view>

????view>

......

這顯然不是編程手段，你可以把每個對象放入一個數組，然后利用組件的wx:for屬性循環渲染這個數組的每一個元素，程序片段如下

在.JS文件中定義對象數組數據

page({

????data:{

????????tempArray:[

????????????{picPath?:"../../image/natrue1.png",

????????????text:"大好河山",

????????????price:0},

? ????????? {picPath?:""../../image/natrue1.png"",

????????????text:"原始森林",

????????????price:20},

????????? ? {picPath?:"../../image/natrue3.png",

????????????text:"無限原野",

????????????price:30},

? ????????? {picPath?:"../../image/natrue4.png",

????????????text:"藍天綠草",

????????????price:40}? ?

????????]

????},

})

上述tempArray 是在.js中定義得data對象的一個屬性，這個屬性是數組，這個數組的每個元素，又是一個對象，所以把tempArray稱為對象數組。

那么，在.WXML中，可以利用wx:for屬性實現循環渲染

????????<view?class="unit">

????<image?class="img"?mode="widthFix"?src="{{item.picPath}}"image>

????????????<view?class="slogan">{{item.text}}view>

??????????<view?class="price">門票:{{item.price}}view>

???????????view>

二、循環渲染注意事項

1：wx:for是小寫的，是組件的一個屬性；

2：wx:for后面跟著的是對象數組的數組名稱，后續則用關鍵字item代替這個數組名稱本身，關鍵字index代表數組下標；

3：上述代碼，將循環渲染對象數組中的內容；

4：wx:for="{{arrayName}}"，中的arrayName的名稱是data中定義的，可以是任意數組，不一定是對象數組；

5：上述wx:for的意思就是自動完成數組遍歷；

使用構造一個代碼塊，類似c或.js中的{語句塊}，表示在同一個邏輯控制下的一組語句，是個好思路！

三、更改wx:for的默認變量名

那么，如果不用默認的item和index做變量可以嗎？可以！

可以將上述代碼修改為：

????????<view?class="unit">

????<image?class="img"?mode="widthFix"?src="{{body.picPath}}"image>

????????????<view?class="slogan">{{body.text}}view>

??????????<view?class="price">門票:{{body.price}}view>

???????????view>

四、條件渲染

那么，用組件的wx:if="{{表達式}}"屬性，可以實現條件渲染，也就是滿足一定條件時顯示某個組件(塊)

????組件塊

這個語法中，理解的關鍵還是 組件的屬性值用雙引號括起來，頁面表達式用{{}}胡子語法！

那么同理，還可以加wx:else，wx:elif="{{表達式}}"，如:

????組件塊

????組件塊

上述注意，是elif,不是elseif！

自己上機測試吧，

總結

以上是生活随笔為你收集整理的小程序循环不同的组建_小程序之八，对象数组、循环及条件渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。