淺談uniapp頁(yè)面跳轉(zhuǎn)的解決方案
正常的頁(yè)面跳轉(zhuǎn)的api大家應(yīng)該都清楚,但是涉及到多頁(yè)面來(lái)回跳轉(zhuǎn)以及返回到導(dǎo)航頁(yè)的時(shí)候就需要一些技巧來(lái)進(jìn)行處理,之前找了挺多文章也沒(méi)有很詳細(xì)的介紹,本文就詳細(xì)說(shuō)說(shuō)頁(yè)面跳轉(zhuǎn)的那些事。
1.uniapp常用跳轉(zhuǎn)API
API | 作用 |
---|---|
uni.navigateTo | 保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,使用uni.navigateBack 可以返回到原頁(yè)面。 |
uni.redirectTo | 關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 |
uni.reLaunch | 關(guān)閉所有頁(yè)面,打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 |
uni.switchTab | 跳轉(zhuǎn)到 tabBar 頁(yè)面,并關(guān)閉其他所有非 tabBar 頁(yè)面。 |
uni.navigateBack | 關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面??赏ㄟ^(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。 |
2.微信小程序頁(yè)面跳轉(zhuǎn)API
API | 作用 |
---|---|
wx.navigateTo | 保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 |
wx.redirectTo | 關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 |
wx.reLaunch | 關(guān)閉所有頁(yè)面,打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 |
uni.switchTab | 跳轉(zhuǎn)到 tabBar 頁(yè)面,并關(guān)閉其他所有非 tabBar 頁(yè)面。使用其他跳轉(zhuǎn) API 來(lái)跳轉(zhuǎn)到 tabbar會(huì)跳轉(zhuǎn)失敗。 |
wx.navigateBack | 關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。 |
3.其他頁(yè)面跳轉(zhuǎn)回tabbar頁(yè)面的方法
以這個(gè)小程序舉例,在這個(gè)頁(yè)面可以看到通過(guò)點(diǎn)擊這些跳轉(zhuǎn)后的頁(yè)面返回時(shí)都得返回現(xiàn)在這個(gè)頁(yè)面。
以入庫(kù)記錄為例,進(jìn)去后又有很多的跳轉(zhuǎn),比如點(diǎn)擊某條記錄跳轉(zhuǎn)到了詳情頁(yè),其中點(diǎn)擊了編輯又跳轉(zhuǎn)到了另一個(gè)編輯頁(yè)面,編輯完成后肯定得跳轉(zhuǎn)回這個(gè)頁(yè)面,這時(shí)候問(wèn)題來(lái)了,直接返回的話就不是跳轉(zhuǎn)回我們想要的tabbar頁(yè)面了,因?yàn)闂V羞€存在其他的頁(yè)面,需要一層層的出棧??赡苡腥藭?huì)說(shuō)可以使用navigateBack
,使用這個(gè)是可以跳回來(lái),但是無(wú)法刷新頁(yè)面,還得在onShow
生命周期再發(fā)起一次請(qǐng)求。而且需要自己算跳幾次也比較麻煩。這時(shí)候我們就可以使用這個(gè)生命周期onBackPress
我們通過(guò)清空頁(yè)面棧并且跳轉(zhuǎn)回tabbar來(lái)達(dá)到我們想要的效果,這個(gè)最后的return true
非常關(guān)鍵,如果不寫(xiě)就達(dá)不到跳轉(zhuǎn)到我們想要的頁(yè)面的效果。當(dāng)然使用這個(gè)生命周期不是只能跳回到tabbar頁(yè)面,這個(gè)生命周期是監(jiān)聽(tīng)返回的事件,我們也可以跳轉(zhuǎn)到其他的頁(yè)面,只需要把switchTab
換成redirectTo
即可。
onBackPress() { uni.switchTab({ url: '/pages/manage/manage' }) return true },
這個(gè)生命周期是有參數(shù)傳進(jìn)入來(lái)的,我們可以避免掉通過(guò)navigateBack
跳過(guò)來(lái)的頁(yè)面,否則容易出問(wèn)題
onBackPress(options) { if (options.from === 'navigateBack') { return false } uni.redirectTo({ url: '/page/index' }) return true },
然而這個(gè)生命周期只適用APP,H5和支付寶小程序,微信小程序是不支持這個(gè)api的,這時(shí)候我們就得專門(mén)對(duì)微信小程序做處理。onUnload
生命周期是所有端都通用的,我們只需要在頁(yè)面卸載時(shí)調(diào)用微信原生的跳轉(zhuǎn)到tabbar的api即可實(shí)現(xiàn)我們的效果,這樣就可以多端都保持一致。
onUnload() { //#ifdef MP-WEIXIN wx.switchTab ({ url: '/pages/manage/manage' }) //#endif },
4.頁(yè)面來(lái)回跳轉(zhuǎn)保持?jǐn)?shù)據(jù)的方法
一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面拿到數(shù)據(jù)后回到原先頁(yè)面數(shù)據(jù)還需要維持原先的樣子怎么來(lái)處理,這個(gè)時(shí)候就需要navigateBack
和getCurrentPages
結(jié)合起來(lái)了使用了。
舉個(gè)例子,我希望在填寫(xiě)完入庫(kù)日期備注后通過(guò)點(diǎn)擊手動(dòng)跳轉(zhuǎn)到物資選擇頁(yè)面來(lái)去選擇對(duì)應(yīng)的物資進(jìn)行入庫(kù),這時(shí)候如果通過(guò)常規(guī)的跳轉(zhuǎn)的方式再次回到原先頁(yè)面,那么之前填寫(xiě)的日期備注等數(shù)據(jù)就已經(jīng)重置了,這并不是我們所期望的。
我們跳轉(zhuǎn)到物資選擇頁(yè)面可以使用navigateTo
uni.navigateTo({ url: item.url, })
在物資選擇頁(yè)面通過(guò)獲取頁(yè)面棧實(shí)例的方式拿到上一個(gè)頁(yè)面,當(dāng)我們選擇完畢后將數(shù)據(jù)保存到原先頁(yè)面定義的data中去,最后通過(guò)navigateBack
回到上一個(gè)頁(yè)面,那么上一個(gè)頁(yè)面之前填寫(xiě)的內(nèi)容和現(xiàn)在選擇完后的內(nèi)容就都有了。
// 獲取當(dāng)前頁(yè)面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁(yè),最后一個(gè)元素為當(dāng)前頁(yè)面。 const pages = getCurrentPages() const prevPage = pages[pages.length - 2] //上一個(gè)頁(yè)面 //#ifdef H5 prevPage._data.selectData = this.selectMaterial //#endif //小程序中的修改方法 // #ifndef H5 prevPage.$vm._data.selectData = this.selectMaterial //#endif uni.navigateBack() //返回上一頁(yè)面
本人也是剛接觸uniapp不久,寫(xiě)的有問(wèn)題的地方還望各位大佬指出,本文只是當(dāng)自身的踩坑記錄。如果對(duì)各位有幫助再好不過(guò)。
到此這篇關(guān)于淺談uniapp頁(yè)面跳轉(zhuǎn)的解決方案的文章就介紹到這了,更多相關(guān)uniapp頁(yè)面跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解析Javascript中難以理解的11個(gè)問(wèn)題
這篇文章主要是對(duì)Javascript中難以理解的11個(gè)問(wèn)題進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記,內(nèi)容很詳細(xì),感興趣的小伙伴們可以參考一下2016-05-05『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼
一個(gè)文字方塊必須限制只能輸入數(shù)字(或是小數(shù)點(diǎn))并且要支援 IE 和 Firefox,接下來(lái)為大家介紹下如何解決這個(gè)需求2013-04-04基于Bootstrap下拉框插件bootstrap-select使用方法詳解
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap下拉框插件bootstrap-select的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08JS消息彈框alert、confirm、prompt的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS消息彈框alert、confirm、prompt,文中還給大家介紹了js的三大基礎(chǔ)彈框,結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒(méi)有indexOf()方法,可通過(guò)下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05json對(duì)象和formData相互轉(zhuǎn)換的方式詳解
我們有兩種常見(jiàn)的傳參方式: JSON 對(duì)象格式和 formData 格式,但是一些場(chǎng)景是需要我們對(duì)這兩種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換的,這篇文章主要介紹了json對(duì)象和formData相互轉(zhuǎn)換的方式詳解,需要的朋友可以參考下2023-02-02uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10