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. 10分钟,解决卖点没创意的难题zz

    创意”,是一个广告人引以为豪又十分头疼的词.有时候,创意来了怎么都挡不住,思如泉涌:有时候,想破脑壳都想不出符合卖点的创意.而笔者告诉我们,有一个方法能轻松解决这个难题. 思路+灵感 问你一个问题:假 ...

  2. 基于OpenCL的深度学习工具:AMD MLP及其使用详解

    基于OpenCL的深度学习工具:AMD MLP及其使用详解 http://www.csdn.net/article/2015-08-05/2825390 发表于2015-08-05 16:33| 59 ...

  3. iOS 移动开发周报

    iOS 移动开发周报   前言 是的,我又开始写周报了!主要是因为喵神不写周报了,加上我发现大家对写 iOS 技术周报这件事情似乎没什么兴趣.其实我觉得这是一个挺好的学习总结的办法,所以要不就继续我来 ...

  4. undefined reference to libiconv_open ext/iconv/.libs/iconv.o by install phpsource

    错误信息:ext/iconv/.libs/iconv.o(.text+0x30e2): In function `php_iconv_stream_filter_factory_create':/ho ...

  5. android mvp高速开发框架介绍(dileber的简单介绍)

    今天我为大家介绍一款android mvp框架:dileber(https://github.com/dileber/dileber.git) 官方交流qq群:171443726 我个人qq:2971 ...

  6. poj3034--Whac-a-Mole(dp)

    题目链接:id=3034">点击打开链接 题目大意:砸地鼠游戏,n*n的方格,锤子每次最多移动d,地鼠在t时刻出如今(x,y)时间.维持一个单位时间,不会在同一时间同一位置出现两仅仅老 ...

  7. Java 多线程1(转载)

    来源:http://hllvm.group.iteye.com/group/wiki/2877-synchronized-volatile 最近想将java基础的一些东西都整理整理,写下来,这是对知识 ...

  8. mac下使用gnu gcc

    1 mac下安装gnu gcc brew search gcc brew install gcc@6 2 mac下编写c/c++代码所需的标准库和头文件 2.1 标准c++的库的头文件都是标准化了的, ...

  9. Redis(二)延迟队列

    1.目录 延迟队列 进一步优化 2.延迟队列 package com.redis; import java.lang.reflect.Type; import java.util.Set; impor ...

  10. LightOJ1245 Harmonic Number (II) —— 规律

    题目链接:https://vjudge.net/problem/LightOJ-1245 1245 - Harmonic Number (II)    PDF (English) Statistics ...