微信小程序开发之页面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 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
随机推荐
- Thunderbolt雷电接口
官网:https://thunderbolttechnology.net/tech/certification
- 【Android Studio探索之路系列】之十:Gradle项目构建系统(四):Android Studio项目多渠道打包
作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.co ...
- python-tornado操作
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...
- CUGBACM_Summer_Tranning1 二进制枚举+模拟+离散化
整体感觉:这个组队赛收获还挺多的.自从期末考试以后已经有一个多月没有 做过组队赛了吧,可是这暑假第一次组队赛就找回了曾经的感觉.还挺不错的!继续努力!! 改进的地方:这次组队赛開始的时候题目比較难读懂 ...
- Kubernetes之网络策略(Network Policy)
系列目录 概述 Kubernetes要求集群中所有pod,无论是节点内还是跨节点,都可以直接通信,或者说所有pod工作在同一跨节点网络,此网络一般是二层虚拟网络,称为pod网络.在安装引导kubern ...
- Model Vaildation
https://docs.asp.net/en/latest/mvc/models/validation.html 许多有用的验证属性都必须引用命名空间: System.ComponentModel. ...
- vue-router 介绍
vue-router是官方的路由管理工具,用于组建单页面应用很方便快捷.还记得我们在上一篇文章中,使用vue-cli创建的hello-vue的那个项目吗?打开项目,我们先看下目录结构: 看了上面的目录 ...
- fabric-ca安装
1.Go版本1.7+(具体可参考Linux安装Go语言) 2.GOPATH环境变量正确配置 export GOROOT=/usr/local/go export GOPATH=/opt/gopath ...
- cvpr2014
http://www.cvpapers.com/cvpr2014.html 吴佳俊 楼天城
- linux修改进程的名字
1 修改linux进程名字的基本原理 linux进程以argv[0]作为进程的名字,因此只需要修改argv[0]处的字符串就修改了linux进程的名字. 2 直接修改argv[0]会导致的问题 如果名 ...