一、問題背景:
兩個頁面多次來回點擊后循環(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
})
}
}