微信小程序 页面跳转传参的介绍

这篇文章主要介绍了微信小程序 页面跳转传参详解的相关资料,并附简单实例，和实现效果图，需要的朋友可以参考下

 微信小程序 页面跳转传参，做微信小程序必定会用的这样的功能，这里就记录下本人学习实现代码资料。

刚接触微信小程序，多里面的语法和属性还不怎么聊解，如有不多的地方希望各位大神多多指教。今天来说下微信小程序怎么跳转和传参，话不多说直接上代码。

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

代码如下：

 import src= ../WXtemplate/headerTemplate.wxml / 
 view 
 !--滚动图-- 
 view 
 swiper indicator-dots= {{indicatorDots}} autoplay= {{autoPlay}} interval= {{intervalTime}} duration= {{Time}} 
 block wx:for= {{imageURl}} 
 swiper-item 
 image src= {{item}} >
其中
 
为模版代码如下
 template name= buttonList 
 view >
这里只为下面的列表增加了点击方法
点击列表js代码
listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url: #39;/pages/xiangqing/xiangqing?id=上一页的参数 #39;}) 
 }
其中
wx.navigateTo({url: /pages/xiangqing/xiangqing?id=上一页的参数 }) 
为跳转方法，id为需要传的参数 如果参数为动态参数代码如下： 
listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 wx.navigateTo({url: #39;/pages/xiangqing/xiangqing?id= #39;+p}) 
 }
其中p为上面为每一行设置的id值
在下一页取值代码如下： 
 data:{ 
 // text: 这是一个页面 
 title: #39; #39; 
 onLoad:function(options){ 
 // 页面初始化 options为页面跳转所带来的参数 
 this.setData({ 
 title:options.id 
 })
然后在页面上显示代码如下：

{{title}}  

最终实现效果：


以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序开发之实现选项卡的页面切换

微信小程序 页面跳转和数据传递


以上就是微信小程序 页面跳转传参的介绍的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！