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


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中变量相关的细节分析
Aug 13 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
最省空间的计数器
2006/10/09 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python调用C++程序的方法详解
2017/01/24 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python切片工具pillow用法示例
2018/03/30 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
机关出纳岗位职责
2014/04/03 职场文书
考试诚信承诺书
2014/05/23 职场文书
教师求职自荐书
2014/06/14 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书