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


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 相关文章推荐
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
js实现模糊匹配功能
Feb 15 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 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 异常处理实现代码
2009/03/10 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
机械电子工程专业自荐书
2014/06/10 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
建党伟业的观后感
2015/06/01 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python