微信小程序开发之页面wxml里面实现循环 wx：for

Posted 2020-09-18 强大的程序猿人

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
    }
  })
  },