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


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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
javascript防抖函数debounce详解
Jun 11 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的in_array低性能问题
2013/09/17 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
django和flask哪个值得研究学习
2020/07/31 Python
实例代码讲解Python 线程池
2020/08/24 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
《值日生》教学反思
2014/02/17 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
温馨提示标语
2014/06/26 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
体检通知范文
2015/04/21 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python