解決微信小程序中點(diǎn)擊頁(yè)面返回按鈕時(shí)需要返回多級(jí)的問(wèn)題
最初使用的方法是在頁(yè)面的onUnload中再寫一個(gè)wx.navigateBack()方法，基本上也能實(shí)現(xiàn)效果，但不太完美，會(huì)出現(xiàn)一些情況：
- 如果當(dāng)前頁(yè)面中有按鈕需點(diǎn)擊后跳轉(zhuǎn)到其他頁(yè)面時(shí)，頁(yè)面會(huì)出現(xiàn)先返回上一頁(yè)再跳轉(zhuǎn)到目標(biāo)頁(yè)面的效果，需要針對(duì)這種情況單獨(dú)做判斷
- 經(jīng)測(cè)試發(fā)現(xiàn)，安卓中可以解決問(wèn)題，但ios中會(huì)出現(xiàn)一級(jí)一級(jí)跳轉(zhuǎn)的效果，先看到前一個(gè)頁(yè)面再跳轉(zhuǎn)到最終返回的頁(yè)面
onUnload() {
wx.navigateBack({
delta: 2
})
}
在微信基礎(chǔ)庫(kù)2.16.0以后開始支持page-container組件，通過(guò)這個(gè)組件可以對(duì)右滑手勢(shì)返回、安卓物理返回鍵和navigateBack返回三種操作進(jìn)行控制
使用下列代碼可以實(shí)現(xiàn)點(diǎn)擊頁(yè)面返回、右滑手勢(shì)返回、安卓物理鍵返回直接返回兩級(jí)，首次點(diǎn)擊返回動(dòng)作關(guān)閉的是page-container組件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-794164.html
<page-container
:show="show"
:overlay="false"
@beforeleave="backTip"></page-container>
export default {
data() {
return {
show: true
}
}
}
methods: {
backTip() {
// 一定要加這個(gè)否則可能會(huì)出現(xiàn)再次進(jìn)入該頁(yè)面無(wú)法正常返回的情況
this.show = false
uni.navigateBack({
delta: 2 // 返回層級(jí)可自由設(shè)定
})
}
}
也可通過(guò)該方法實(shí)現(xiàn)返回前頁(yè)面提示效果文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-794164.html
<page-container
v-if="showPage"
:show="show"
:overlay="false"
@beforeleave="backTip"></page-container>
// 這里多加一個(gè)變量showPage來(lái)判斷要不要顯示page-container是因?yàn)橹苯有薷膕how為true/false也會(huì)觸發(fā)組件的beforeleave事件
backTip() {
// 判斷頁(yè)面內(nèi)容是否已經(jīng)保存，保存了就直接返回，未保存就彈出提示
this.show = false
if(this.clickedSave) {
uni.navigateBack()
} else {
// 頁(yè)面操作未保存提示
uni.showModal({
title: '',
content: '當(dāng)前頁(yè)面尚未保存，是否保存離開',
confirmText: '保存',
confirmColor: '#01CB62',
success: (res) => {
if (res.confirm) {
this.handleSave()
} else if (res.cancel) {
uni.navigateBack()
}
}
})
}
}
到了這里，關(guān)于微信小程序解決多級(jí)頁(yè)面返回及實(shí)現(xiàn)返回時(shí)彈出層提示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
