微信小程序webview中監(jiān)聽(tīng)返回按鈕實(shí)現(xiàn)步驟
更新時(shí)間：2024年08月07日 09:18:09 作者：略吃一二
在微信小程序中webview返回鍵是一個(gè)非常實(shí)用的功能,它允許用戶(hù)在嵌入的網(wǎng)頁(yè)中返回到上一個(gè)頁(yè)面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽(tīng)返回按鈕的實(shí)現(xiàn)步驟,需要的朋友可以參考下
項(xiàng)目場(chǎng)景
微信小程序頁(yè)面A跳轉(zhuǎn)—>webview頁(yè)面首頁(yè)B跳轉(zhuǎn)—>webview列表頁(yè)C跳轉(zhuǎn)—>webview詳情頁(yè)面D，當(dāng)在webview詳情頁(yè)面D采用router.push 回到---->webview頁(yè)面首頁(yè)B,此時(shí)在B頁(yè)面點(diǎn)擊左上角返回按鈕會(huì)依次回到，D、C、B頁(yè)面，需求是只要處于B頁(yè)面點(diǎn)擊左上角按鈕直接返回A頁(yè)面。
實(shí)現(xiàn)步驟
1.mounted鉤子中監(jiān)聽(tīng)左上角返回事件
mounted() {
// 往history中添加一條記錄
this.pushHistory()
// 監(jiān)聽(tīng)popstate事件
window.addEventListener('popstate',this.listenPopstate);
}
2.method中定義方法
methods: {
listenPopstate() {
// 判斷是否在B頁(yè)面
if (this.$route.path==='/accountdetail')
// 跳轉(zhuǎn)小程序頁(yè)面相關(guān)邏輯
},
pushHistory() {
window.history.pushState(null,null,null)
}
}
3.頁(yè)面銷(xiāo)毀前解綁事件監(jiān)聽(tīng)
beforeDestroy() {
window.removeEventListener('popstate',this.listenPopstate);
}總結(jié)
到此這篇關(guān)于微信小程序webview中監(jiān)聽(tīng)返回按鈕實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序webview監(jiān)聽(tīng)返回按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)?lái)一篇淺談js中的in-for循環(huán)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
許多人對(duì)JavaScript的原型及原型鏈仍感到困惑，網(wǎng)上的文章又大多長(zhǎng)篇大論，令讀者不明覺(jué)厲。下面小編將用最簡(jiǎn)潔明了的圖文介紹JavaScript的原型及原型鏈。2016-08-08
小程序組件傳值和引入sass的方法(使用vant Weapp組件庫(kù))
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫(kù),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
js實(shí)現(xiàn)轉(zhuǎn)動(dòng)骰子模型
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)轉(zhuǎn)動(dòng)骰子模型，自動(dòng)隨機(jī)生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了JavaScript作用域鏈,結(jié)合實(shí)例形式較為詳細(xì)的分析了作用域鏈的原理、功能與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-01-01
js實(shí)現(xiàn)簡(jiǎn)易的單數(shù)字隨機(jī)抽獎(jiǎng)（0-9）
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)易的單數(shù)字0-9隨機(jī)抽獎(jiǎng)，可以控制抽取隨機(jī)數(shù)開(kāi)始與停止，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JavaScript中輕松獲取頁(yè)面參數(shù)值的N種方法(含代碼示例)
本文旨在深入淺出地揭示如何在JavaScript中巧妙提取那些隱藏在URL背后的寶貴信息,從基礎(chǔ)方法到高級(jí)技巧,一網(wǎng)打盡,無(wú)論你是編程界的菜鳥(niǎo)還是久經(jīng)沙場(chǎng)的老將,這里都有值得你品鑒的“珍饈”,需要的朋友可以參考下2024-06-06
Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請(qǐng)求與asyncData
這篇文章主要介紹了Egg Vue SSR 服務(wù)端渲染數(shù)據(jù)請(qǐng)求與asyncData，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
今天開(kāi)發(fā)的時(shí)候，遇到要點(diǎn)擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實(shí)現(xiàn)方式,下面通過(guò)本文給大家分享JS點(diǎn)擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了詳解JSON.stringify()的5個(gè)秘密特性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05