uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面操作方法
uniapp默認(rèn)左滑是關(guān)閉整個(gè)webview,而不是關(guān)閉當(dāng)前頁(yè) 實(shí)現(xiàn)思路:攔截webview的url跳轉(zhuǎn)操作,將新url用webview組件重新打開(kāi),當(dāng)左滑的時(shí)候,默認(rèn)關(guān)閉的就是當(dāng)前webview,繼而跳轉(zhuǎn)到上一次的頁(yè)面中
<template> <view> <web-view :src="weburl" :update-title="false" :webview-styles="webviewStyles"> </web-view> </view> </template> <script> export default { data() { return { // 進(jìn)度條 webviewStyles: { progress: { color: '#FF3333' } }, weburl: "" }; }, onLoad(option) { console.log("接收到的url參數(shù)是:", option.weburl); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。 this.weburl = option.weburl }, onReady() { var pages = getCurrentPages(); var page = pages[pages.length - 1]; var currentWebview = page.$getAppWebview(); var url = currentWebview.children()[0].getURL(); console.log('=== url ===', url); var wv = currentWebview.children()[0]; wv.overrideUrlLoading({ mode: 'reject', match: '.*' }, function(e) { console.log('reject url: ' + e.url); uni.navigateTo({ url: `/pages/webbox/webbox?weburl=${e.url}` }) }); }, onBackPress(e) { let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentPages = page.$getAppWebview() currentPages.close() return false }, onNavigationBarButtonTap() { console.log("點(diǎn)擊了標(biāo)題欄按鈕") uni.$emit("showMenu") }, methods: {} } </script> <style lang="scss"> </style>
uniapp webview 加載H5,手機(jī)返回鍵處理成返回上一頁(yè),上一個(gè)網(wǎng)頁(yè)
加webview的vue相關(guān)處寫(xiě)如下加紅代碼
<script> const facebook = uni.requireNativePlugin('sn-facebook'); var wv; //計(jì)劃創(chuàng)建的webview export default { data() { return { canBack: false }; }, onLoad() {}, onBackPress() { if (wv && this.canBack) { wv.back(); return true; } return false; }, onReady() { // #ifdef APP-PLUS var self = this; var currentWebview = this.$scope.$getAppWebview(); //此對(duì)象相當(dāng)于html5plus里的plus.webview.currentWebview()。在uni-app里vue頁(yè)面直接使用plus.webview.currentWebview()無(wú)效,非v3編譯模式使用this.$mp.page.$getAppWebview() setTimeout(function() { wv = currentWebview.children()[0]; wv.addEventListener( 'progressChanged', function(e) { wv.canBack(function(e) { self.canBack = e.canBack; }); }, false ); }, 500); //如果是頁(yè)面初始化調(diào)用時(shí),需要延時(shí)一下 // #endif }, methods: { onMessage({ detail }) { const data = detail.data[0]; console.log('onMessage', data); if (data.action == 'login') { // 登錄:自定義參數(shù) facebook.loginWithParams( { permissions: [ // 權(quán)限,更多權(quán)限請(qǐng)看 https://developers.facebook.com/docs/permissions/reference 'email', 'public_profile' ], // 返回字段,更多字段請(qǐng)查看 https://developers.facebook.com/docs/graph-api/reference/user/ fields: 'id, name, email' }, e => { console.log(e); this.postMessage({ ...e, action: 'loginCallback' }); } ); } }, // postMessage to web postMessage(data) { if (wv) { wv.evalJS('window.postMessage(' + JSON.stringify(data) + ');'); } else { uni.showToast({ icon: 'none', title: 'webview不存在' }); } } } }; </script>
到此這篇關(guān)于uniapp的webview實(shí)現(xiàn)左滑返回上一個(gè)頁(yè)面的文章就介紹到這了,更多相關(guān)uniapp webview左滑返回內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行
這篇文章主要介紹了Extjs 點(diǎn)擊復(fù)選框在表格中增加相關(guān)信息行 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07關(guān)于Aptana Studio生成自動(dòng)備份文件的解決辦法
關(guān)于Aptana Studio生成自動(dòng)備份文件的解決辦法2009-12-12微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法,涉及javascript字符串截取操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05js通過(guò)指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例
下面小編就為大家?guī)?lái)一篇js通過(guò)指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼
這篇文章主要介紹了JavaScript中l(wèi)ayim之整合右鍵菜單的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-02小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左右來(lái)回滾動(dòng)字幕效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12