微信小程序开发之页面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 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
随机推荐
- MOS简单应用
高端功率开关驱动的原理非常简单,和低端功率开关驱动相对应,就是负载一端和开关管相连,另外一端直接接地.正常情况下,没有控制信号的时候,开关管不导通,负载中没有电流流过,即负载处于断电状态:反之,如果控 ...
- CSS盒模型之三角形
W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制 ...
- align="absmiddle" 图片的中间上下对齐
align=absmiddle表示图像的中间与同一行中最大元素的中间对齐 AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐.AbsMiddle 图像的中间与同一行中最大元素的中间对齐.B ...
- Quick UDP Internet Connections
https://blog.chromium.org/2013/06/experimenting-with-quic.html user datagram protocol transport laye ...
- imagemap的推荐使用方法,前端自适应image maps库
1.map在浏览器的兼容性相对来说是比较好的,这是我在项目中的一个处理方法 推荐到下面网站去画map http://imagemap-generator.dariodomi.de/ 2.画完去gith ...
- CORS 理解(不要那么多术语)
摘要 谈到跨域,不论前端还是后端,多少有点谈虎色变,面试中也常会问到这些问题,浏览器和服务器端到底怎么做才能跨域,他们都做了什么? 同源 vs 跨域 同源,字面意义是相同的源头,即同一个web服务器( ...
- 2016 Al-Baath University Training Camp Contest-1 I. March Rain —— 二分
题目链接:http://codeforces.com/problemset/gymProblem/101028/I I. March Rain time limit per test 2 second ...
- C#评分小系统练习
一个经理类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...
- Python:递归
递归两个基本要素: (1) 边界条件:确定递归到何时终止,也称为递归出口. (n = 1)(2) 递归模式:大问题是如何分解为小问题的,也称为递归体.(n*(n-1)! n>1) 例:累加 ...
- PIL 安装及使用
我ubunto虚拟机自带的是python2.7,好像PIL也只支持到2.7. PIL包的安装 Debian/Ubunto Linux下直接安装: sudo apt-get install python ...