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


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 相关文章推荐
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
js实现每日签到功能
Nov 29 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue中注册自定义的全局js方法
Nov 15 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php $_ENV为空的原因分析
2009/06/01 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python进程间通信用法实例
2015/06/04 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
最新大学生自我评价
2013/09/24 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
合作意向书格式及范文
2014/03/31 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript