成都网站建设设计

将想法与焦点和您一起共享

微信小程序怎么实现动态传参-创新互联

这篇文章主要讲解了“微信小程序怎么实现动态传参”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现动态传参”吧!

成都创新互联主要从事成都网站设计、网站制作、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务崇礼,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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

跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去:

index.wxml(根据点击页面的不同传递参数)

 
  
  
  {item.MTId}} {{item.status}} 
  
  

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的详细信息进行显示)

 
 MTID 
 {{data_MTId}} 
 
 
 Status 
 {{ data_status}} 
 
 
 Duration 
 {{data_duration}} 
 
 
 Operator 
 {{data_Operator}} 
 
 
 Idle Reason 
 {{data_IdleReason}} 

实现效果截图:

微信小程序怎么实现动态传参

点击具体某个item

微信小程序怎么实现动态传参


感谢各位的阅读,以上就是“微信小程序怎么实现动态传参”的内容了,经过本文的学习后,相信大家对微信小程序怎么实现动态传参这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享名称:微信小程序怎么实现动态传参-创新互联
标题来源:http://chengdu.cdxwcx.cn/article/pdjci.html