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. Struts2使用POI创建Excel并下载

    本文将讲解在Struts2框架下如何使用POI创建Office Excel文档并实现下载功能. Apache POI ,操作微软文档的Java API,简单来说就是可以用来操作Office文档的API ...

  2. kubernetes集群管理命令(三)

    系列目录 前面两节我们由浅入深介绍了不少kubernetes管理比较常用的命令.本节我们通过案例讲解一些需要更为复杂的操作才能完成的命令. 选择一个deployment下的所有pod 前面讲到过,ku ...

  3. IP和归属地

    ip: http://www.ip.cn/index.php?ip=10.132.98.143 归属地: http://www.ip138.com:8080/search.asp?action=mob ...

  4. js怎么限制文本框input只能输入数字

    1.说明 本篇文章介绍怎么使用js限制文本框只能输入数字 2.HTML代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1 ...

  5. DuiLib笔记之设置文本字体

    设置文本字体要用到Font 它的常用属性如下 id 用于标识Font,类型:INT name 用于指定字体名称,类型:STRING size 用于指定字体大小,类型:INT bold 用于指定是否加粗 ...

  6. Unity导包配置详解

    Player Settings is where you define various parameters (platform specific) for the final game that y ...

  7. Retina屏幕下image-set

    实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码: .soso .logo .qqlogo { display: block; width: 134px; height: 44px; b ...

  8. LightOJ1370 Bi-shoe and Phi-shoe —— 欧拉函数

    题目链接:https://vjudge.net/problem/LightOJ-1370 1370 - Bi-shoe and Phi-shoe    PDF (English) Statistics ...

  9. hdu1078 FatMouse and Cheese —— 记忆化搜索

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 代码1: #include<stdio.h>//hdu 1078 记忆化搜索 #in ...

  10. Java 使用POI操作EXCEL及测试框架搭建、测试开发的一些想法

    无论是UI自动化测试还是接口自动化测试都需要进行数据驱动,一般很常见的一种方式就是用excel来管理数据,那么就涉及到一些代码对EXCEL的操作,之前我们介绍过用CSV来处理EXCEL,但是它的功能还 ...