微信小程序頁面?zhèn)鞫鄠€參數(shù)跳轉頁面的實現(xiàn)方法

更新時間：2019年05月17日 09:57:14 作者：online-oliver

這篇文章主要介紹了微信小程序頁面?zhèn)鞫鄠€參數(shù)跳轉頁面的實現(xiàn)方法,本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

這里舉例跳轉兩個參數(shù) 傳遞多少個也可以

這里傳參數(shù) 我寫作 data-item data-id 來綁定同事加了點擊事件bindtap

在index.js

在 data 里我寫的是假數(shù)據(jù)

在跳轉頁面的函數(shù)里傳e 后面定義的東西根據(jù)e來確定可以在console打印

console.log(e)

這樣我們就拿到了傳遞的數(shù)據(jù) 然后進行定義等

這里跳轉詳情頁的函數(shù) wx.navigateTo 這是一種跳轉的方法 tabBar頁面要用wx.switchTab 路徑后面加上 jsonStr 等

在跳轉的詳情頁面的onload方法里面寫

我們打印上個頁面?zhèn)魅氲臄?shù)據(jù)

打印出上個頁面?zhèn)魅氲臄?shù)據(jù) 在進行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({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  fast:[ //假數(shù)據(jù)
   { '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:[ //假數(shù)據(jù)
   {'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,
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {
 }
})

indexDetail.js

Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  detail: [],
  detailList,
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 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
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {
 }
})

總結

以上所述是小編給大家介紹的微信小程序頁面?zhèn)鞫鄠€參數(shù)跳轉頁面的實現(xiàn)方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

Js日期選擇自動填充到輸入框(界面漂亮兼容火狐)
本文為大家寫了個很漂亮、兼容火狐的Js日期選擇，自動填充到輸入框，代碼如下，有需要的朋友可以參考下
2013-08-08
Javascript HTML5 Canvas實現(xiàn)的一個畫板
這篇文章主要為大家詳細介紹了Javascript HTML5 Canvas實現(xiàn)的一個畫板的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
微信小程序判斷用戶是否需要再次授權獲取個人信息
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權獲取個人信息,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果實例分析
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁標題欄閃爍提示效果的方法,以實例形式分析了網(wǎng)上比較常見的實現(xiàn)方法,并對于原理進行分析并加以改進,最后給出了一個具體的應用實例供大家參考,需要的朋友可以參考下
2014-11-11
Bootstrap table的使用方法
這篇文章主要為大家詳細解析了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
純js實現(xiàn)的積木(div層)拖動功能示例
這篇文章主要介紹了純js實現(xiàn)的積木(div層)拖動功能,結合實例形式分析了javascript隨機生成各種顏色div層及響應鼠標事件改變元素屬性實現(xiàn)拖動效果的相關操作技巧,需要的朋友可以參考下
2017-07-07
JavaScript實現(xiàn)文件下載并重命名代碼實例
這篇文章主要介紹了JavaScript實現(xiàn)文件下載并重命名代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-12-12
javascript正則表達式參數(shù)/g與/i及/gi的使用指南
正則表達式：是對字符串操作的一種邏輯公式，用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規(guī)則字符串”，這個“規(guī)則字符串”用來表達對字符串的一種過濾邏輯
2014-08-08
JS實現(xiàn)時間格式化的方式匯總
這篇文章介紹了JS實現(xiàn)時間格式化的方式，有需要的朋友可以參考一下
2013-10-10
js實現(xiàn)數(shù)據(jù)導出為EXCEL（支持大量數(shù)據(jù)導出）
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)據(jù)導出為EXCEL，支持大量數(shù)據(jù)導出，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03