微信小程序中如何实现页面跳转传参

小编给大家分享一下微信小程序中如何实现页面跳转传参,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、简阳服务器托管、云服务器、虚拟空间、网站系统开发经验,已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟空间、国际域名空间、VPS主机、云服务器、香港云服务器、免备案服务器等。

实现的功能是给列表增加点击功能传参到下一页;

微信小程序中如何实现页面跳转传参

代码如下:

 
 
  
  
  
  
   
    
   
  
  
  
  
  
  
   
   
   
  
  
  
  
  
   
  
  
  
 
 
 

其中

                             {{item.title}}    {{item.subTitle}}         

这里只为下面的列表增加了点击方法

点击列表js代码

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'}) 
 }

其中

wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'})  

为跳转方法,id为需要传的参数 如果参数为动态参数代码如下:  

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) 
 }

其中p为上面为每一行设置的id值

在下一页取值代码如下:  

 data:{ 
 // text:"这是一个页面" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // 页面初始化 options为页面跳转所带来的参数 
 this.setData({ 
 title:options.id 
 })

然后在页面上显示代码如下:

{{title}}  

最终实现效果:

微信小程序中如何实现页面跳转传参

以上是“微信小程序中如何实现页面跳转传参”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站栏目:微信小程序中如何实现页面跳转传参
网页URL:http://pwwzsj.com/article/gjiigi.html