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


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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
AngularJS表单基本操作
Jan 09 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
Vuex 入门教程
Jan 10 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
ES6函数实现排它两种写法解析
May 13 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 FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
深入理解Vue nextTick 机制
2018/04/28 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python单元测试简单示例
2018/07/03 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python中import与from方法总结(推荐)
2019/03/21 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
护理专业推荐信
2013/11/07 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书