微信小程序 頁面傳多個參數跳轉頁面


按照下面的例子即可

 

 

這里傳參數 我寫作 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 () {
    
  }
})

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM