uniapp 一種避免頁面來回跳轉的解決方法

一、問題背景:

兩個頁面多次來回點擊后循環(huán)跳轉,返回時會一層一層返回重復的頁面,想避免這種情況,在安卓中可以設置頁面的啟動模式,uniapp我不知道有沒有設置啟動模式這種方法。
1、與別人的聊天頁面可以點擊頭像跳轉個人主頁,個人主頁中也可以點擊聊天進入和他的聊天頁面。設聊天頁面為a頁面,個人主頁為b頁面。
2、應用中可以從某個不確定頁面跳轉到a,再從a到b...(情況一),也可以從某個不確定頁面先跳轉到b,再跳轉到a....(情況二)。

二、兩種情況的預期效果:

情況一:c a b a b a ==> c a b
從c跳轉到a,再到b,再到a b a ....循環(huán)跳轉后,如果當前在a頁面時,點擊返回回到c,如果當前在b頁面,點擊返回回到a,再點返回回到c。
情況二:d b a b a b ==> d b a
從d跳轉到b,再到a,再到b a b ....循環(huán)跳轉后,如果當前在b頁面時,點擊返回回到d,如果當前在a頁面,點擊返回回到b,再點返回回到d。

三、分析:

通過getCurrentPages()判頁面棧里的頁面,
在a頁面中:判斷棧中如果a頁面先進來,b頁面再進來,就是情況一,此時a到b,就用uni.navigateTo正常跳(如果此時棧中還沒有b,也是此方法)。如果棧中是b頁面先進來,a頁面再進來,就是情況二,此時a到b,就用uni.navigateBack返回的方式實現(xiàn)頁面切換。
在b頁面中:同上分析

四、解決方法:

在a頁面:a跳b時(沒有b是正常跳b):如果第一個a在第一個b前面,就是一,正常跳,如果第一個a在第一個b后面,就是二,直接返回。
在b頁面:b跳a時(沒有a是正常跳a):如果第一個b在第一個a前面,就是二,正常跳,如果第一個b在第一個a后面,就是一,直接返回

五、其他:

也可以通過從不同頁面?zhèn)鬟f一個變量到a、b中區(qū)分這兩種情況,然后執(zhí)行不同的跳轉,但我覺得這還得去修改其他頁面,不利于擴展。就直接改這兩個頁面,不用動其他頁面。
但官方文檔建議:
注意: getCurrentPages()僅用于展示頁面棧的情況,請勿修改頁面棧,以免造成頁面狀態(tài)錯誤。
用了下感覺沒啥問題就先這樣用了。

六、代碼:

聊天頁面:

//去個人主頁 
            toPerson(user){  
                //獲取頁面棧中所有頁面 
                let pages = getCurrentPages()  
                //如果想打印直接這樣打印,不要加什么拼接字符串、JSON.stringify()什么的 
                console.log(getCurrentPages());  
                //棧中頁面的路徑單獨保存為數(shù)組,方便后續(xù)比較 
                let pageUrl = []  
                for (let i = 0; i < pages.length; i++) {  
                    //pages[i].$page.fullPath 是頁面的全路徑,會連頁面?zhèn)鬟f的參數(shù)都打印出來,不方便后續(xù)比較 
                    // console.log("第"+i+"個頁面 = " + pages[i].$page.fullPath); 
                    console.log("第"+i+"個頁面 = " + pages[i].route);  
                    //用pages[i].route就比較單純了 
                    pageUrl.push(pages[i].route)  
                }  
                //獲取a、b頁面第一次入棧的位置 
                let first_a = pageUrl.indexOf("pages/home/chat")//聊天頁面 
                let first_b = pageUrl.indexOf("pages/mine/person_center")//個人主頁 
                if (first_b < 0) {  
                    console.log("沒有b是正常跳b");  
                    uni.navigateTo({  
                        url: '../mine/person_center?user=' + JSON.stringify(user)//業(yè)務邏輯跳轉傳的參數(shù) 
                    })  
                } else {  
                    if (first_a < first_b) {  
                        console.log("正常跳 b ");  
                        uni.navigateTo({  
                            url: '../mine/person_center?user=' + JSON.stringify(user)//業(yè)務邏輯跳轉傳的參數(shù) 
                        })  
                    } else {  
                        console.log("返回 b");  
                        uni.navigateBack({  
                            delta: 1  
                        })  
                    }  
                }  
            },

個人主頁:

//去聊天頁面 
            toChat() {  
                //獲取頁面棧中所有頁面 
                let pages = getCurrentPages()  
                //如果想打印直接這樣打印,不要加什么拼接字符串、JSON.stringify()什么的 
                console.log(getCurrentPages());  
                //棧中頁面的路徑單獨保存為數(shù)組,方便后續(xù)比較 
                let pageUrl = []   
                for (let i = 0; i < pages.length; i++) {  
                    //pages[i].$page.fullPath 是頁面的全路徑,會連頁面?zhèn)鬟f的參數(shù)都打印出來,不方便后續(xù)比較 
                    // console.log("第"+i+"個頁面 = " + pages[i].$page.fullPath);//會帶參數(shù) 
                    console.log("第"+i+"個頁面 = " + pages[i].route);  
                    //用pages[i].route就比較單純了 
                    pageUrl.push(pages[i].route)  
                }  
                //獲取a、b頁面第一次入棧的位置 
                let first_a = pageUrl.indexOf("pages/home/chat")//聊天頁面 
                let first_b = pageUrl.indexOf("pages/mine/person_center")//個人主頁 
                if (first_a < 0) {  
                    console.log("沒有a是正常跳a");  
                    uni.navigateTo({  
                        url: '../home/chat?user=' + JSON.stringify(this.user)//業(yè)務邏輯跳轉傳的參數(shù) 
                    })  
                } else {  
                    if (first_b < first_a) {  
                        console.log("正常跳 a ");  
                        uni.navigateTo({  
                            url: '../home/chat?user=' + JSON.stringify(this.user)//業(yè)務邏輯跳轉傳的參數(shù) 
                        })  
                    } else {  
                        console.log("返回 a");  
                        uni.navigateBack({  
                            delta: 1  
                        })  
                    }  
                }
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容