js代码:

Page({

data:{

upploadimagelist:{},    //上报图片列表 js数组

}})

后台数据库保存的格式:{"imageList":[{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/48e11aa9-88ef-449e-b617-513c83a09f40.jpg"},{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/4050ceaa-1673-42e8-97ea-56991290ad76.png"},{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/59403872-0f18-43a6-93e4-53a0816bd047.jpg"}]}

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的更多相关文章

  1. 【微信小程序开发】页面配置

    app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...

  2. 微信小程序开发 [02] 页面注册和基本组件

    1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...

  3. 微信小程序开发之页面数据绑定

    js:Page( { data:{ parmer:"",             //字符串参数 userinfo:{      userphone:"",   ...

  4. 微信小程序开发之页面注册

    页面Page是object Page({  data:{    String1  },  onLoad:function(options){    // 生命周期函数--监听页面加载 一个页面只会调用 ...

  5. 微信小程序开发之页面跳转并携带参数

    接口: wx.navigateTo({url:......})   保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....})       关 ...

  6. 微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败

    安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...

  7. 获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级(微信小程序开发)

    微信小程序开发时,Console 提示:获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级 错误原因: 直接调用这个方法依旧可以获取用户信息, 但是如果你之前没有点击过那个授权 ...

  8. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  9. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

随机推荐

  1. 【浅墨Unity3D Shader编程】之三 光之城堡篇:子着色器、通道与标签的写法 &amp; 纹理混合

    本系列文章由@浅墨_毛星云 出品,转载请注明出处.   文章链接:http://hpw123.net/a/C__/kongzhitaichengxu/2014/1117/120.html 作者:毛星云 ...

  2. IOS AFNETWORKING POST

    IOS AFNETWORKING POST 请求 #pragma mark post 请求 // 获取 url 路劲,不带参数 NSString *requestUrl = [[url compone ...

  3. c#冒泡法排序

    1.通过冒泡法实现一个int数组的有小到大的排序 代码如下: //用for语句来实现排序功能,冒泡排序 static void Sort(int[] number) { ; i < number ...

  4. 远程访问Linux的常见方式

    访问方式 不加密文字界面:telnet.rsh 加密文字界面:SSH 图形界面:Xdmcp.RDP.VNC SSH SSH用来取代finger.R shell(rlogin.rcp.rsh).teln ...

  5. ElasticSearch(九)基于version进行乐观锁并发控制

    一.基于version进行乐观锁并发控制 1).查看一条document GET /test_version/test_version_type/ { "_index" : &qu ...

  6. Linux struct itimerval使用方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hbuxiaofei/article/details/35569229 先看一段代码 #include ...

  7. HZNU 与班尼特·胡迪一起攻破浮空城 【DP】

    题目链接 http://acm.hznu.edu.cn/OJ/problem.php?id=2264 思路 从终点往起点走 然后每次更新状态 因为要满足 最短路线 所以其实 只能是 往左走,往下走 或 ...

  8. LuNamp和LuManager的目录结构

    /|---- etc/|-------- my.cnf #mysql配置文件|-------- ipfw.conf #ipfw防火墙的配置文件(仅FreeBSD)|---- home/|------- ...

  9. 编写按键驱动以及在framework层上报按键事件

    平台信息:内核:linux3.10 系统:android6.0平台:RK3288 前言:本文主要实现的功能是在android系统中添加一个按键,在驱动层使用定时器,每隔1秒钟向上层发送按键实现,fra ...

  10. 基于BASYS2的VHDL程序——交通灯

    请尊重作者版权,转载请注明原地址: http://www.cnblogs.com/connorzx/p/3676746.html 数电实验交通灯VHDL版,程序写的扩展性很差,待以后有时间进行优化. ...