1. 程式人生 > >微信小程序開發之頁面wxml裏面實現循環 wx:for

微信小程序開發之頁面wxml裏面實現循環 wx:for

bin quest span geo back 微信小程序 navi 取數 循環語句

js代碼:

Page({

data:{

upploadimagelist:{}, //上報圖片列表 js數組

}})

var uploadimageObj=JSON.parse(res.data.feedback.fbimages); //將後臺傳過來的json字符串轉換為js數組,res為wx.request({})請求成功的返回對象

wxml代碼:<view wx:for="{{upploadimagelist}}" wx:key="id">
<image class="uploadimageclass" src="{{item.fileUrl}}"></image>
</view>

循環語句默認的循環變量是item,故使用item來取數據,可以說是對象也可以是某個字段,取決於upploadimagelist裏面的數據有幾層

<view class="listcontain" bindtap="getInfoDetial" id="{{item.id}}">。。。</view> //可以在視圖裏綁上id,配合事件getInfoDetial,可以獲取到列表數據的id,對後續用id進行進一步查詢或排序有著重要的意義

事件getInfoDetial寫法

getInfoDetial:function(e){
//獲取列表ID
var id=e.currentTarget.id;


wx.navigateTo({
url: ‘detailinfo/index?id=‘+ id, //帶參數頁面跳轉,在目的頁面的onLoad方法裏面就能取到id,進行進一步處理(比如獲取該id下的詳細信息)
success: function(res){
// success
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
},

微信小程序開發之頁面wxml裏面實現循環 wx:for