微信小程序webview中監(jiān)聽返回按鈕實(shí)現(xiàn)步驟
更新時(shí)間：2024年08月07日 09:18:09 作者：略吃一二
在微信小程序中webview返回鍵是一個(gè)非常實(shí)用的功能,它允許用戶在嵌入的網(wǎng)頁中返回到上一個(gè)頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實(shí)現(xiàn)步驟,需要的朋友可以參考下
項(xiàng)目場景
微信小程序頁面A跳轉(zhuǎn)—>webview頁面首頁B跳轉(zhuǎn)—>webview列表頁C跳轉(zhuǎn)—>webview詳情頁面D，當(dāng)在webview詳情頁面D采用router.push 回到---->webview頁面首頁B,此時(shí)在B頁面點(diǎn)擊左上角返回按鈕會依次回到，D、C、B頁面，需求是只要處于B頁面點(diǎn)擊左上角按鈕直接返回A頁面。
實(shí)現(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)小程序頁面相關(guān)邏輯
},
pushHistory() {
window.history.pushState(null,null,null)
}
}
3.頁面銷毀前解綁事件監(jiān)聽
beforeDestroy() {
window.removeEventListener('popstate',this.listenPopstate);
}總結(jié)
到此這篇關(guān)于微信小程序webview中監(jiān)聽返回按鈕實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序webview監(jiān)聽返回按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談js函數(shù)中的實(shí)例對象、類對象、局部變量(局部函數(shù))
下面小編就為大家?guī)硪黄獪\談js函數(shù)中的實(shí)例對象、類對象、局部變量(局部函數(shù))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
微信小程序如何加載數(shù)據(jù)庫真實(shí)數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序如何加載數(shù)據(jù)庫真實(shí)數(shù)據(jù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對象模式的實(shí)例講解
下面小編就為大家?guī)硪黄狫S設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對象模式的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章給大家總結(jié)下JavaScript數(shù)組去重的幾種方法，面試中也經(jīng)常會遇到這個(gè)問題。文中給大家引申的還有合并數(shù)組并去重的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2021-10-10
這篇文章主要介紹了angularjs模態(tài)框的使用代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JS+Canvas實(shí)現(xiàn)滿屏愛心和文字動畫的制作
Canvas?適合繪制大數(shù)據(jù)量圖形元素的圖表（如熱力圖、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等），也適合實(shí)現(xiàn)某些視覺特效。本文就來利用Canvas實(shí)現(xiàn)滿屏愛心和文字動畫的制作，感興趣的可以了解一下2022-11-11
range 是用戶選擇區(qū)域的唯一表示方法，存在 w3c 的標(biāo)準(zhǔn)化 range ，以及 ie 特有的 textrange 與 controlrange ，相對于 ie ，w3c 的概念更易于理解，首先簡要介紹一下 w3c range.2011-08-08
這篇文章主要給大家介紹了關(guān)于js前端面試之同步與異步問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了JS修改iframe頁面背景顏色的方法,涉及javascript操作iframe頁面樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
等待控件在網(wǎng)上搜有好多種，但是都很復(fù)雜，不一定用的順手，再說我的項(xiàng)目是bootstrap的原因，又不敢輕易使用第三方控件，怕不兼容，于是自己動手寫了個(gè)等待控件，有需要的朋友可以參考下2015-10-10