微信小程序开发之页面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++零基础到入门
(1)C语言概述 (2)编写.运行一个简单的C语言程序 (3)数据类型 (4)运算符和表达式 如果你对C语言一窍不通,那你就好好看这篇文章,我会力争让你真正的做到从零基础到入门,同时这篇文章会让你基本 ...
- LINUX创建用户的命令
LINUX创建用户的命令useradd -g test -d /home/test1 -s /etc/bash -m test1注解:-g 所属组 -d 家目录 -s 所用的SHELL 删除用户命令u ...
- Codeforces Round #267 (Div. 2) B. Fedor and New Game
After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...
- Oracle学习(十三):闪回
1.知识点:能够对比以下的录屏进行阅读 SQL> --1. 错误地删除了记录 SQL> --2. 错误地删除了表 SQL> --3. 查询历史记录 SQL> --4. 怎样撤销 ...
- SAM4E单片机之旅——1、LED闪烁之空循环
最近因为导师要写一本关于SAME4单片机的书籍,而我也作为一个嵌入式的初学者看了这本书.现在也让我写写几个小的程序,做做示例.既然写了文档之类的,就发到博客上来吧. 目前关于这芯片能参考的书籍大概就只 ...
- Share Memory By Communicating
Share Memory By Communicating - The Go Programming Language https://golang.google.cn/doc/codewalk/sh ...
- 操作系统 资源管理 zookeeper yarn 进程管理 分布式 yarn诞生背景
zookeeper 信息保管员 YARN 简介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/index.html
- Learning Scrapy 中文版翻译 第二章
为了从网页中提取信息,你有必要对网页的结构做一些了解.我们将快速学习HMTL,HTML数状结构以及用XPath在网页上提取信息 HTML, DOM树结构以及XPath 让我们花一点时间来了解当用户在浏 ...
- js 链接传入中文参数乱码解决
传入时,可能出现中文的参数用encodeURI进行两次转码,如: lethref="http://www.zzdblog.cn?keyword='+encodeURI(encodeURI(k ...
- [原创]java在线比较两个word文件
一.项目背景 开发文档管理系统或OA办公系统的时候,实现在线处理word文档的功能比较容易,但是也经常会有客户提出文档版本管理的需求,这就需要同时在线打开两个word文件,对比两个不同版本的word文 ...