亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

淺談uniapp頁面跳轉(zhuǎn)的解決方案

 更新時(shí)間:2022年05月06日 15:10:10   作者:唯有灬努力  
頁面跳轉(zhuǎn)是經(jīng)常需要用到的,本文主要介紹了淺談uniapp頁面跳轉(zhuǎn)的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

正常的頁面跳轉(zhuǎn)的api大家應(yīng)該都清楚,但是涉及到多頁面來回跳轉(zhuǎn)以及返回到導(dǎo)航頁的時(shí)候就需要一些技巧來進(jìn)行處理,之前找了挺多文章也沒有很詳細(xì)的介紹,本文就詳細(xì)說說頁面跳轉(zhuǎn)的那些事。

1.uniapp常用跳轉(zhuǎn)API

API作用
uni.navigateTo保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面,使用uni.navigateBack可以返回到原頁面。
uni.redirectTo關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
uni.reLaunch關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個(gè)頁面。
uni.switchTab跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面。
uni.navigateBack關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面??赏ㄟ^ getCurrentPages() 獲取當(dāng)前的頁面棧,決定需要返回幾層。

2.微信小程序頁面跳轉(zhuǎn)API

API作用
wx.navigateTo保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
wx.redirectTo關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。
wx.reLaunch關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個(gè)頁面。
uni.switchTab跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面。使用其他跳轉(zhuǎn) API 來跳轉(zhuǎn)到 tabbar會(huì)跳轉(zhuǎn)失敗。
wx.navigateBack關(guān)閉當(dāng)前頁面,返回上一頁面或多級頁面??赏ㄟ^ getCurrentPages() 獲取當(dāng)前的頁面棧,決定需要返回幾層。

3.其他頁面跳轉(zhuǎn)回tabbar頁面的方法

以這個(gè)小程序舉例,在這個(gè)頁面可以看到通過點(diǎn)擊這些跳轉(zhuǎn)后的頁面返回時(shí)都得返回現(xiàn)在這個(gè)頁面。

以入庫記錄為例,進(jìn)去后又有很多的跳轉(zhuǎn),比如點(diǎn)擊某條記錄跳轉(zhuǎn)到了詳情頁,其中點(diǎn)擊了編輯又跳轉(zhuǎn)到了另一個(gè)編輯頁面,編輯完成后肯定得跳轉(zhuǎn)回這個(gè)頁面,這時(shí)候問題來了,直接返回的話就不是跳轉(zhuǎn)回我們想要的tabbar頁面了,因?yàn)闂V羞€存在其他的頁面,需要一層層的出棧??赡苡腥藭?huì)說可以使用navigateBack,使用這個(gè)是可以跳回來,但是無法刷新頁面,還得在onShow生命周期再發(fā)起一次請求。而且需要自己算跳幾次也比較麻煩。這時(shí)候我們就可以使用這個(gè)生命周期onBackPress

我們通過清空頁面棧并且跳轉(zhuǎn)回tabbar來達(dá)到我們想要的效果,這個(gè)最后的return true非常關(guān)鍵,如果不寫就達(dá)不到跳轉(zhuǎn)到我們想要的頁面的效果。當(dāng)然使用這個(gè)生命周期不是只能跳回到tabbar頁面,這個(gè)生命周期是監(jiān)聽返回的事件,我們也可以跳轉(zhuǎn)到其他的頁面,只需要把switchTab換成redirectTo即可。

onBackPress() {
        uni.switchTab({
                url: '/pages/manage/manage'
        })
        return true
},

這個(gè)生命周期是有參數(shù)傳進(jìn)入來的,我們可以避免掉通過navigateBack跳過來的頁面,否則容易出問題

onBackPress(options) {
    if (options.from === 'navigateBack') { 
        return false    
    } 
    uni.redirectTo({ url: '/page/index' }) 
    return true
},

然而這個(gè)生命周期只適用APP,H5和支付寶小程序,微信小程序是不支持這個(gè)api的,這時(shí)候我們就得專門對微信小程序做處理。onUnload生命周期是所有端都通用的,我們只需要在頁面卸載時(shí)調(diào)用微信原生的跳轉(zhuǎn)到tabbar的api即可實(shí)現(xiàn)我們的效果,這樣就可以多端都保持一致。

onUnload() {
        //#ifdef MP-WEIXIN
        wx.switchTab ({
                url: '/pages/manage/manage'
        })
        //#endif
},

4.頁面來回跳轉(zhuǎn)保持?jǐn)?shù)據(jù)的方法

一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面拿到數(shù)據(jù)后回到原先頁面數(shù)據(jù)還需要維持原先的樣子怎么來處理,這個(gè)時(shí)候就需要navigateBackgetCurrentPages結(jié)合起來了使用了。

舉個(gè)例子,我希望在填寫完入庫日期備注后通過點(diǎn)擊手動(dòng)跳轉(zhuǎn)到物資選擇頁面來去選擇對應(yīng)的物資進(jìn)行入庫,這時(shí)候如果通過常規(guī)的跳轉(zhuǎn)的方式再次回到原先頁面,那么之前填寫的日期備注等數(shù)據(jù)就已經(jīng)重置了,這并不是我們所期望的。

我們跳轉(zhuǎn)到物資選擇頁面可以使用navigateTo

uni.navigateTo({
    url: item.url,
})

在物資選擇頁面通過獲取頁面棧實(shí)例的方式拿到上一個(gè)頁面,當(dāng)我們選擇完畢后將數(shù)據(jù)保存到原先頁面定義的data中去,最后通過navigateBack回到上一個(gè)頁面,那么上一個(gè)頁面之前填寫的內(nèi)容和現(xiàn)在選擇完后的內(nèi)容就都有了。

    // 獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面。
    const pages = getCurrentPages() 
    const prevPage = pages[pages.length - 2] //上一個(gè)頁面
    //#ifdef H5
    prevPage._data.selectData = this.selectMaterial
    //#endif
    //小程序中的修改方法
    // #ifndef H5
    prevPage.$vm._data.selectData = this.selectMaterial
    //#endif
    uni.navigateBack() //返回上一頁面

本人也是剛接觸uniapp不久,寫的有問題的地方還望各位大佬指出,本文只是當(dāng)自身的踩坑記錄。如果對各位有幫助再好不過。

到此這篇關(guān)于淺談uniapp頁面跳轉(zhuǎn)的解決方案的文章就介紹到這了,更多相關(guān)uniapp頁面跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論