首页 > 代码库 > 微信小程序开发之页面wxml里面实现循环 wx:for
微信小程序开发之页面wxml里面实现循环 wx:for
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="http://www.mamicode.com/{{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