?

區(qū)別：

? ?1.navigator是屬于小程序組件中的，導(dǎo)航欄是屬于小程序API中的

? ?2.navigator組件是用在axml頁(yè)面中跳轉(zhuǎn)的導(dǎo)航，它有4種類型（見下表）；導(dǎo)航欄API是用在js中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的

? ?3.navigator是通過給屬性open-type賦值的方法來實(shí)現(xiàn)其對(duì)應(yīng)的跳轉(zhuǎn)功能，導(dǎo)航欄是通過封裝好的API中方法（如下表）實(shí)現(xiàn)其對(duì)應(yīng)的功能

?

關(guān)聯(lián)：

navigator的屬性open-type對(duì)應(yīng)導(dǎo)航欄API中的相應(yīng)功能，參考該表理解 ?

? ? ? navigator（open-type）	? ? ? ? ? ? ? 導(dǎo)航欄
? ? ? navigate（默認(rèn)值）	? ? ? ?對(duì)應(yīng)my.navigateTo的功能
? ? ? redirect	? ? ? ?對(duì)應(yīng)my.redirectTo的功能
? ? ? switchTab	? ? ? ?對(duì)應(yīng)my.switchTab的功能?
? ? ? navigateBack	? ? ? ?對(duì)應(yīng)my.navigateBack的功能

?

建議：

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

?

用法場(chǎng)景：

1.my.navigateTo：

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面，路徑后可帶參數(shù)，參數(shù)規(guī)則如下：路徑與參數(shù)之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔；如 path?key1=value1&key2=value2；

使用?my.navigateBack?可以返回到原頁(yè)面；頁(yè)面最大深度為10，即可連續(xù)調(diào)用 10 次 navigateTo

示例代碼：

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

?

2.my.redirectTo：

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面，路徑后可帶參數(shù)，參數(shù)規(guī)則如下：路徑與參數(shù)之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔；如path?key1=value1&key2=value2

示例代碼：

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

?

3.my.switchTab:

跳轉(zhuǎn)到指定 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面；跳轉(zhuǎn)的頁(yè)面的路徑需要在app.json的tabBar中聲明的頁(yè)面且路徑后不能帶參數(shù)

示例代碼：

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

?

4.my.navigateBack:

關(guān)閉當(dāng)前頁(yè)面，返回上一級(jí)或多級(jí)頁(yè)面。可通過 getCurrentPages 獲取當(dāng)前的頁(yè)面棧信息，決定需要返回幾層；返回的頁(yè)面數(shù)，如果 delta 大于現(xiàn)有頁(yè)面數(shù)，則返回到首頁(yè)。

示例代碼：

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

my.navigateTo 和 my.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁(yè)面；如果需要跳轉(zhuǎn)到 tabbar 頁(yè)面，請(qǐng)使用 my.switchTab

?

5.my.reLaunch:

關(guān)閉當(dāng)前所有頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)指定頁(yè)面。如果頁(yè)面不為 tabbar 頁(yè)面則路徑后可以帶參數(shù)。參數(shù)規(guī)則如下：路徑與參數(shù)之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)必須用&分隔；如path?key1=value1&key2=value2

示例代碼：

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

?

6.my.setNavigationBar:

設(shè)置導(dǎo)航欄文字及樣式，導(dǎo)航欄底部邊框顏色，支持十六進(jìn)制顏色值。若設(shè)置了 backgroundColor，則borderBottomColor 不會(huì)生效，默認(rèn)會(huì)和 backgroundColor 顏色一樣

示例代碼：

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

?

7.my.showNavigationBarLoading:

顯示導(dǎo)航欄 loading

示例代碼：

my.showNavigationBarLoading();

?

8.my.hideNavigationBarLoading:

隱藏導(dǎo)航欄 loading

示例代碼：

my.hideNavigationBarLoading();

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。