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