?

區別：

? ?1.navigator是屬于小程序組件中的，導航欄是屬于小程序API中的

? ?2.navigator組件是用在axml頁面中跳轉的導航，它有4種類型（見下表）；導航欄API是用在js中實現頁面跳轉的

? ?3.navigator是通過給屬性open-type賦值的方法來實現其對應的跳轉功能，導航欄是通過封裝好的API中方法（如下表）實現其對應的功能

?

關聯：

navigator的屬性open-type對應導航欄API中的相應功能，參考該表理解 ?

? ? ? navigator（open-type）	? ? ? ? ? ? ? 導航欄
? ? ? navigate（默認值）	? ? ? ?對應my.navigateTo的功能
? ? ? redirect	? ? ? ?對應my.redirectTo的功能
? ? ? switchTab	? ? ? ?對應my.switchTab的功能?
? ? ? navigateBack	? ? ? ?對應my.navigateBack的功能

?

建議：

如果需要在跳轉做其他邏輯處理建議使用導航欄API，不做的話建議使用navigator組件

?

用法場景：

1.my.navigateTo：

保留當前頁面，跳轉到應用內的某個指定頁面，路徑后可帶參數，參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如 path?key1=value1&key2=value2；

使用?my.navigateBack?可以返回到原頁面；頁面最大深度為10，即可連續調用 10 次 navigateTo

示例代碼：

my.navigateTo({url: 'new_page?count=100' })

?

2.my.redirectTo：

關閉當前頁面，跳轉到應用內的某個指定頁面，路徑后可帶參數，參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如path?key1=value1&key2=value2

示例代碼：

my.redirectTo({url: 'new_page?count=100' })

?

3.my.switchTab:

跳轉到指定 tabBar 頁面，并關閉其他所有非 tabBar 頁面；跳轉的頁面的路徑需要在app.json的tabBar中聲明的頁面且路徑后不能帶參數

示例代碼：

// app.json {"tabBar": {"items": [{"pagePath": "home","name": "首頁"},{"pagePath": "user","name": "用戶"}]} } my.switchTab({url: '/home' })

?

4.my.navigateBack:

關閉當前頁面，返回上一級或多級頁面。可通過 getCurrentPages 獲取當前的頁面棧信息，決定需要返回幾層；返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。

示例代碼：

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧， // 而 redirectTo 方法則不會。見下方示例代碼// 此處是one頁面 my.navigateTo({url: 'two?pageId=10000' })// 此處是two頁面 my.navigateTo({url: 'one?pageId=99999' })// 在three頁面內 navigateBack，將返回one頁面 my.navigateBack({delta: 2 })

my.navigateTo 和 my.redirectTo 不允許跳轉到 tabbar 頁面；如果需要跳轉到 tabbar 頁面，請使用 my.switchTab

?

5.my.reLaunch:

關閉當前所有頁面，跳轉到應用內的某個指定頁面。如果頁面不為 tabbar 頁面則路徑后可以帶參數。參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如path?key1=value1&key2=value2

示例代碼：

my.reLaunch({url: '/page/index' })

?

6.my.setNavigationBar:

設置導航欄文字及樣式，導航欄底部邊框顏色，支持十六進制顏色值。若設置了 backgroundColor，則borderBottomColor 不會生效，默認會和 backgroundColor 顏色一樣

示例代碼：

my.setNavigationBar({title: '你好',backgroundColor: '#108ee9',success() {my.alert({content: '設置成功', });},fail() {my.alert({content: '設置是失敗',});}, });

?

7.my.showNavigationBarLoading:

顯示導航欄 loading

示例代碼：

my.showNavigationBarLoading();

?

8.my.hideNavigationBarLoading:

隱藏導航欄 loading

示例代碼：

my.hideNavigationBarLoading();

總結

以上是生活随笔為你收集整理的支付宝小程序中Navigator和导航栏之间的区别以及用法场景的分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。