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

Posted 子钦加油

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 页面传多个参数跳转页面相关的知识,希望对你有一定的参考价值。

按照下面的例子即可

 

 

这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap

在index.js 

 

 

在 data 里我写的是假数据

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

console.log(e)

 

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

 

 

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

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

 

 

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

 

 

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

wxml:

<view class=\'fast-container\'>
  <block wx:for="{{fast}}" wx:key="fast">
    <view class=\'fast-row\' bindtap=\'goIndexDetail\' data-item="{{item}}" data-id="{{list}}">
        <view class=\'row-tou\'>
            <image class=\'img\' src=\'{{item.image}}\'></image>
        </view>
        <view class=\'row-content\'>
          <view class=\'text\'>{{item.name}}</view>
          <view class=\'content\'>{{item.summary}}</view>
        </view>
    </view>
  </block>
</view>

index.js

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

  

以上是关于微信小程序 页面传多个参数跳转页面的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 页面跳转navigator与传递参数

微信小程序页面跳转传参数

微信小程序--如何在两个页面之间传值

获取微信小程序URL参数

微信小程序的页面跳转==编程式导航传参 和 标签的方法传参

微信小程序怎么把变量传到另一个页面?