微信小程序 導航 4種頁面跳轉 詳解


1、wx.navigateTo   保留當前頁面,跳轉到應用內的某個頁面,目前頁面路徑最多只能十層。 

  參數:url(可攜帶參數) 、success 、fail 、complete

  可用wxml代替:   <navigator url='test?id=參數'  hover-class="none">

//本頁面 
wx.navigateTo({
    url:'test?id=參數',
  success:function(){
    console.log('接口調用成功')
  },
  fail:function(){
    console.log('接口調用成功')  
  },
  complete:function(){
    console.log('調用結束,調用成功失敗都會執行')
  }
})

//test 頁面拿 參數,在onload方法中 以對象的方式傳回
Page({
  onLoad:function(options){
    console.log(options)  // {id:'參數'}
  }
})

  

2.wx.redirectTo 關閉當前頁面,跳轉到應用內某個頁面。(如果下一頁面 有返回上一頁箭頭,則跳過當前頁面

  參數:url(可攜帶參數)、 success 、fail 、complete

  用法同1

 

3.wx.reLaunch    關閉所有頁面,打開到應用內的某個頁面。(不會有返回上一頁箭頭)

  參數:url(可攜帶參數)、 success 、fail 、complete

  用法同1

 

4.wx.switchTab    跳轉到tabBar 頁面,並關閉其他所有非 tabBar 頁面

     參數:url(可攜帶參數)、 success 、fail 、complete

  用法同1

  另:  tabBar 在app.json中配置,附配置方法

//tabbar配置 示例
"tabBar": { "color": "#bcbcbc", "selectedColor": "#4d4d4d", "borderStyle": "#bcbcbc", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "iconPath": "libs/img/tab_index.png", "selectedIconPath": "libs/img/tab_index_on.png", "text": "主頁" }, { "pagePath": "pages/mall/mall", "iconPath": "libs/img/tab_mall.png", "selectedIconPath": "libs/img/tab_mall_on.png", "text": "商城" }, { "pagePath": "pages/per/per", "iconPath": "libs/img/tab_per.png", "selectedIconPath": "libs/img/tab_per_on.png", "text": "個人" } ] }

 

5.wx.navigateBack 返回到上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧,決定要返回幾層

  參數:delta 返回的頁面數,如果大於現有頁面數,則返回到首頁。。。

wx.navigateBack({

    delta:2     //如果delta大於等於2,返回目標頁時,中間頁會出現一下相繼返回至目標頁。  解決辦法:中間頁用 wx.redirectTo代替

})

  


免責聲明!

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



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