
制作的小程序當(dāng)點(diǎn)擊彈出層超過(guò)10層時(shí)就會(huì)在頁(yè)面怎么點(diǎn)也沒(méi)有反應(yīng)效果,就像手機(jī)卡死一樣。(我一開(kāi)始以為寫的程序有死循環(huán)卡死了,怎么也檢查不出來(lái))
但是微信小程序中有特別說(shuō)明:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
wx.navigateTo(Object object)
保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。
使用 wx.navigateBack 可以返回到原頁(yè)面。小程序中頁(yè)面棧最多十層。
如何查看頁(yè)面棧數(shù)量
如果你用navigateTo做鏈接跳轉(zhuǎn),就會(huì)很快的成為10層以上。所以使用時(shí)一定要注意。
redirectTo、navigateBack、switchTab、reLaunch 這四個(gè)的使用環(huán)境是不一樣的。
通過(guò)執(zhí)行g(shù)etCurrentPages()這個(gè)函數(shù)可以查看當(dāng)前小程序中頁(yè)面棧的數(shù)量。
最后參考了資料與別人的想法。
封裝一個(gè)名叫l(wèi)inkJump的方法,然后頁(yè)面上的鏈接跳轉(zhuǎn)時(shí)全部要通過(guò)這個(gè)方法。這也就意味著:之前頁(yè)面上使用<navigator>標(biāo)簽跳轉(zhuǎn)的地方要全部換成js事件,否則就無(wú)法走linkJump方法了
/* url: 要跳轉(zhuǎn)的鏈接,例如:pages/find/index?id=15 */
/* callback: 回調(diào)方法,做些特殊的事情 */
function linkJump ({ url, callback }) {
if (!url) { return }
let newUrl = url
if (url[0] === '/') { /* 過(guò)濾首位的/ */
newUrl = url.substring(1)
}
const pathname = newUrl.split('?')[0]
const tabBarUrl = ['pages/index/index', 'pages/find/index', 'pages/user/index', 'pages/cart/index'] /* Tab頁(yè)中的路徑,請(qǐng)根據(jù)自己項(xiàng)目實(shí)際情況進(jìn)行修改 */
const page = getCurrentPages()
const index = page.findIndex(item => item.route === pathname)
/* 如果是Tab中的鏈接,直接跳轉(zhuǎn) */
if (tabBarUrl.includes(pathname)) {
uni.switchTab({
url: url,
success: () => {
callback && callback()
}
})
return
}
if (index !== -1) { /* 在頁(yè)面棧中找到時(shí) */
const step = page.length - 1 - index
if (step === 0) {
uni.redirectTo({
url: url,
success: () => {
callback && callback()
}
})
} else {
callback && callback()
uni.navigateBack({ delta: step })
}
return
}
/* 否則就直接跳轉(zhuǎn) */
uni.navigateTo({
url: url,
success: () => {
callback && callback()
}
})
}
//使用方式
linkJump({
url: '/pages/merchant/info?id=' + this.locationId + '¤t=0', /* 商家信息頁(yè)的url */
callback: () => {
this.$store.commit('setLinkJumpInfo', { location_id: this.locationId, current: 0 }) /* vuex中保存信息,用于在info頁(yè)面接收并做出相應(yīng)的處理。除此之外,還可以使用微信小程序自身的存儲(chǔ)功能,比如:wx.getStorage() */
}
})
源碼地址:https://github.com/yilingsj/uni-app-demo/tree/dev-pagestack-20201002
網(wǎng)上參考地址:http://www.yilingsj.com/xwzj/2020-10-02/uni-app-pagestack.html
呢 稱: | |
表 情: | |
內(nèi) 容: |
評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。 |
驗(yàn)證碼: | |
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。