富力丹麥小鎮(zhèn)P20-602的春天

一、對(duì)象數(shù)組

很多情況下，我們需要多次顯示同一個(gè)條目(item)，或者說(shuō)是某個(gè)類(lèi)的不同實(shí)例對(duì)象。類(lèi)似如下：

那么，你可以寫(xiě)很復(fù)雜的WXML，“手工”地為每個(gè)對(duì)象書(shū)寫(xiě)一塊WXML，顯示一個(gè)對(duì)象，向下面這個(gè)代碼：

<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">門(mén)票view>

????view>

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

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

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

??????<view?class="price">門(mén)票view>

????view>

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

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

??????????<view?class="slogan">無(wú)限原野view>

??????<view?class="price">門(mén)票view>

????view>

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

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

??????????<view?class="slogan">藍(lán)天綠草view>

??????<view?class="price">門(mén)票view>

????view>

......

這顯然不是編程手段，你可以把每個(gè)對(duì)象放入一個(gè)數(shù)組，然后利用組件的wx:for屬性循環(huán)渲染這個(gè)數(shù)組的每一個(gè)元素，程序片段如下

在.JS文件中定義對(duì)象數(shù)組數(shù)據(jù)

page({

????data:{

????????tempArray:[

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

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

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

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

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

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

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

????????????text:"無(wú)限原野",

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

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

????????????text:"藍(lán)天綠草",

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

????????]

????},

})

上述tempArray 是在.js中定義得data對(duì)象的一個(gè)屬性，這個(gè)屬性是數(shù)組，這個(gè)數(shù)組的每個(gè)元素，又是一個(gè)對(duì)象，所以把tempArray稱(chēng)為對(duì)象數(shù)組。

那么，在.WXML中，可以利用wx:for屬性實(shí)現(xiàn)循環(huán)渲染

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

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

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

??????????<view?class="price">門(mén)票:{{item.price}}view>

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

二、循環(huán)渲染注意事項(xiàng)

1：wx:for是小寫(xiě)的，是組件的一個(gè)屬性；

2：wx:for后面跟著的是對(duì)象數(shù)組的數(shù)組名稱(chēng)，后續(xù)則用關(guān)鍵字item代替這個(gè)數(shù)組名稱(chēng)本身，關(guān)鍵字index代表數(shù)組下標(biāo)；

3：上述代碼，將循環(huán)渲染對(duì)象數(shù)組中的內(nèi)容；

4：wx:for="{{arrayName}}"，中的arrayName的名稱(chēng)是data中定義的，可以是任意數(shù)組，不一定是對(duì)象數(shù)組；

5：上述wx:for的意思就是自動(dòng)完成數(shù)組遍歷；

使用構(gòu)造一個(gè)代碼塊，類(lèi)似c或.js中的{語(yǔ)句塊}，表示在同一個(gè)邏輯控制下的一組語(yǔ)句，是個(gè)好思路！

三、更改wx:for的默認(rèn)變量名

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

可以將上述代碼修改為：

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

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

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

??????????<view?class="price">門(mén)票:{{body.price}}view>

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

四、條件渲染

那么，用組件的wx:if="{{表達(dá)式}}"屬性，可以實(shí)現(xiàn)條件渲染，也就是滿(mǎn)足一定條件時(shí)顯示某個(gè)組件(塊)

????組件塊

這個(gè)語(yǔ)法中，理解的關(guān)鍵還是 組件的屬性值用雙引號(hào)括起來(lái)，頁(yè)面表達(dá)式用{{}}胡子語(yǔ)法！

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

????組件塊

????組件塊

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

自己上機(jī)測(cè)試吧，

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。