微信小程序开发之页面wxml里面实现循环 wx:for
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的更多相关文章
- 【微信小程序开发】页面配置
app下的app.json文件是全局配置. app下的每一个page中,也可以配置.json文件. page中配置的内容是对应app中window配置项下的内容. page中的配置将覆盖window中 ...
- 微信小程序开发 [02] 页面注册和基本组件
1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...
- 微信小程序开发之页面数据绑定
js:Page( { data:{ parmer:"", //字符串参数 userinfo:{ userphone:"", ...
- 微信小程序开发之页面注册
页面Page是object Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函数--监听页面加载 一个页面只会调用 ...
- 微信小程序开发之页面跳转并携带参数
接口: wx.navigateTo({url:......}) 保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....}) 关 ...
- 微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败
安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...
- 获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级(微信小程序开发)
微信小程序开发时,Console 提示:获取 wx.getUserInfo 接口后续将不再出现授权弹窗,请注意升级 错误原因: 直接调用这个方法依旧可以获取用户信息, 但是如果你之前没有点击过那个授权 ...
- 微信小程序开发07-列表页面怎么做
接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
随机推荐
- C# 知识点随手学习网站推荐
http://www.studyofnet.com/news/list-8881.2-1-1.html
- div和img之间的缝隙问题
这次做的项目,客户说.banner图的上下之间不要留有空隙,细致一看才发现,上下居然都有空隙.审查元素,发现全部的div,img的padding和margin都是0,对于这个间隙到底是假设产生的真的是 ...
- JSON和JSONP 傻傻分不清楚?
什么是JSON 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2 ...
- cvpr2017-code-etc
cvpr2017: code: http://staffhome.ecm.uwa.edu.au/~00053650/code.html
- C# Winform 中webBrowser显示html内容时禁止错误提示的方法
在winform中有一个控件可以显示html的内容,该控件就是webbrowser,设置它的DocumenText属性为HTML的内容即可. 在使用WebBrowser做UI的时候,我们有时不希望里面 ...
- C语言malloc
在子函数里面动态申请的内存不会自动被系统收回的,因为这些空间在堆里面,而不是栈,平常所说的不能返回指向栈的指针,比如在子函数里面定义一个字符指针,指向常量"hello"因为函数调用 ...
- 在OC项目中实现swift与oc混编 相互引用
--------------------------------------------------------Begin--------------------------------------- ...
- Android笔记之平移View
方法有多种,只讲一种 使用View.setLeft和View.setRight 对于wrap_content的View,要横向平移,setRight是必要的,否则View的宽度会被改变(right应设 ...
- asp概述
asp的理解 今天才知道,Asp原来不是一种语言,也不是一种开发工具,而是一种技术框架, 主要功能是把脚本语言,HTML,组件和Web数据库访问功能有机的结合在一起, 形成一个能在服务器端运行的应用程 ...
- MySQL 的“root”用户修改密码
MySQL 的“root”用户默认状态是没有密码的,所以在 PHP 中您可以使用 mysql_connect("localhost","root"," ...