微信小程序页面传多个参数跳转页面的实现

微信小程序页面传多个参数跳转页面的实现？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

index.js

在 data 里我写的是假数据

在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印

console.log(e)

这样我们就拿到了 传递的数据 然后进行定义等

这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等

在跳转的详情页面的onload方法里面写

我们打印上个页面传入的数据

打印出上个页面传入的数据 在进行that.setData 就行了

wxml：

 
  
    
      
    
    
     {{item.name}}
     {{item.summary}}
    
  
 

index.js

Page({
 /**
  * 页面的初始数据
  */
 data: {
  fast:[ //假数据
   { &＃39;name&＃39;: &＃39;red&＃39;, &＃39;image&＃39;: &＃39;/img/123.jpg&＃39;,&＃39;summary&＃39;:&＃39;我是红色&＃39;},
   { &＃39;name&＃39;: &＃39;green&＃39;, &＃39;image&＃39;: &＃39;/img/123.jpg&＃39;, &＃39;summary&＃39;: &＃39;我是绿色&＃39; },
   { &＃39;name&＃39;: &＃39;blue&＃39;, &＃39;image&＃39;: &＃39;/img/123.jpg&＃39;, &＃39;summary&＃39;: &＃39;我是蓝色&＃39; },
   { &＃39;name&＃39;: &＃39;orange&＃39;, &＃39;image&＃39;: &＃39;/img/123.jpg&＃39;, &＃39;summary&＃39;: &＃39;我是橘色&＃39; }
  ],
  list:[ //假数据
   {&＃39;content&＃39;:&＃39;content-red&＃39;},
   { &＃39;content&＃39;: &＃39;content-green&＃39; },
   { &＃39;content&＃39;: &＃39;content-blue&＃39; },
   { &＃39;content&＃39;: &＃39;content-orange&＃39; }   
  ]
 },
 // ----跳转详情页
 goIndexDetail : function (e) {
  // console.log(&＃39;我要传入的值e+++&＃39;,e)
  let id = e.currentTarget.dataset.id;
  let item = e.currentTarget.dataset.item;
  console.log(&＃39;我传入的data-id+&＃39;,id,&＃39;我传入的data-item=&＃39;,item)
  let str = JSON.stringify(id);
  let _str = JSON.stringify(item)
  wx.navigateTo({
   url: &＃39;/pages/index/indexDetail/indexDetail?jsOnStr=&＃39; + str + "&strr=" + _str,
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 }
})

indexDetail.js

Page({
 /**
  * 页面的初始数据
  */
 data: {
  detail: [],
  detailList,
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  let that = this
  // console.log(options)
  // console.log(options.jsonStr)
  // console.log(options.strr)
  let item = JSON.parse(options.jsonStr)
  let id = JSON.parse(options.strr)
  console.log(&＃39;上个页面跳转的data-item++&＃39;, item)
  console.log(&＃39;上个页面跳转的data-id++&＃39;, id)
  that.setData({
   detail: id,
   detailList: item
  })
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 }
})

看完上述内容，你们掌握微信小程序页面传多个参数跳转页面的实现的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程笔记行业资讯频道，感谢各位的阅读！