微信小程序 动态传参实例详解


Posted in Javascript onApril 27, 2017

微信小程序 动态传参实例详解

在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面。接下来介绍下如何实现。

上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息。

跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去:

index.wxml(根据点击页面的不同传递参数)

<view class="item" wx:for="{{showData}}"> 
 <navigator url="/pages/logs/logs?id={{item.id}}" class="title"> 
 <view class="td"> 
  {item.MTId}} {{item.status}} 
 </view> 
 </navigator> 
</view>

id是在本地数据中已经写好的,参见以前的博客,它也对应了每一条数据其他详细信息。由此可以想到,我们只要在下一级页面根据传递参数id再在本地数据中查询,然后将查询结果进行显示,就做到了加载详细信息这个功能。

logs.js(接受index.wxml传递的参数并处理)

Page({ 
 onLoad: function (options) { 
 console.log(options.id) 
 var init = myData.searchmtdata(options.id) 
 this.setData({ 
  data_MTId: init.MTId, 
  data_status: init.status, 
  data_duration: init.Duration, 
  data_Operator: init.Operator, 
  data_IdleReason: init.IdleReason 
 }) 
 } 
})

searchmtdata这个方法在之前的博客中已经有说明,就是根据id的值来查询,返回一个list中具体的对象,即某个item的详细信息。

onLoad:function这个函数在页面加载时就会执行一次,options就是接收的从index.wxml传递过来的参数。根据id查询到具体的list对象后再进行赋值,此时data_**中的数据就是某个item的详细信息了。

logs.wxml(对item的详细信息进行显示)

<view class="ar_item" style="border-top:1px solid #ddd;"> 
 <text class="ar_name">MTID</text> 
 <text class="ar_content">{{data_MTId}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Status</text> 
 <text class="ar_content">{{ data_status}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Duration</text> 
 <text class="ar_content">{{data_duration}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Operator</text> 
 <text class="ar_content">{{data_Operator}}</text> 
</view> 
<view class="ar_item"> 
 <text class="ar_name">Idle Reason</text> 
 <text class="ar_content">{{data_IdleReason}}</text> 
</view>

实现效果截图:

微信小程序 动态传参实例详解

点击具体某个item

微信小程序 动态传参实例详解微信小程序 动态传参实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
详解axios在node.js中的post使用
Apr 27 #Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
js绑定事件和解绑事件
Apr 27 #Javascript
You might like
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php实现的简单日志写入函数
2015/03/31 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vuex 中插件的编写案例解析
2019/06/10 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
Python二维码生成识别实例详解
2019/07/16 Python
python中sys模块是做什么用的
2020/08/16 Python
python开发入门——列表生成式
2020/09/03 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
门卫人员岗位职责
2013/12/24 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
公司贷款承诺书
2014/05/30 职场文书
数学教育专业求职信
2014/07/22 职场文书
2014最新实习证明模板
2014/10/02 职场文书
初中思品教学反思
2016/02/20 职场文书
商业计划书之服装
2019/09/09 职场文书