微信小程序頁面?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)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: