uniapp实现webview页面关闭功能的代码示例
更新时间：2024年03月01日 10:58:01 作者：爱池鱼的酱酱仔
uniapp用web-view打开一个网页,网页中点击跳转到下一层级的网页,一层层深入,点击返回键或者页面上方返回按钮只能一层层往回退,下面这篇文章主要给大家介绍了关于uniapp实现webview页面关闭功能的相关资料,需要的朋友可以参考下
实现思路：
1.关闭按钮是使用原生button添加的close属性。（见page.json页面）
2.监听关闭按钮的方法。（onNavigationBarButtonTap）
3.写实现关闭webview所有页面的逻辑。
废话不多说，直接上代码
1.page.json添加关闭按钮
2.webview页面实现关闭逻辑
实现代码：
<template>
<view v-if="params.url">
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
url: "https://www.hgjt.com/"
},
webviewStyles: {
progress: {
color: "#027AFF"
}
}
}
},
props: {
src: {
type: [String],
default: null
}
},
onLoad(event) {},
onBackPress(event) {
console.log(event, 'event')
},
onNavigationBarButtonTap(e) {
if (e.type == 'close') {
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentPages = page.$getAppWebview()
let children = currentPages.children()
if (children.length === 0) {
uni.navigateBack()
} else {
children[0].close()
setTimeout(() => {
uni.navigateBack()
}, 80)
}
return true;
}
}
}
</script>附：uniapp使用webview的页面需要返回两次
在使用uniapp的webview组件时，如果需要返回两次才能退出页面，有可能是因为在webview中嵌入的H5页面中使用了history.back()方法，导致返回栈中多了一层。可以尝试在H5页面中使用history.go(-1)方法或者uni.navigateBack()方法返回上一级页面，这样就可以避免返回栈中多余的一层，实现一次返回退出页面的效果。另外，也可以在webview组件中设置vue-router的mode为history模式，这样就可以使用uni.navigateBack()方法进行返回，而不会出现返回两次的情况。
总结
到此这篇关于uniapp实现webview页面关闭功能的文章就介绍到这了,更多相关uniapp webview页面关闭功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue中swiper开启loop后,点击事件不响应的解决方案
这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了ant-design表单处理和常用方法及自定义验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了Vue实例的一些简单方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了mockjs+vue页面直接展示数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了vue实现移动端div拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了使用Vuex解决Vue中的身份验证问题,本文通过文字实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-09-09
vue项目中axios如何捕捉http状态码为401错误问题
这篇文章主要介绍了vue项目中axios如何捕捉http状态码为401错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue.js中,computed属性根据依赖进行缓存,只有依赖改变时才重新计算,这样有效提高性能,computed属性是响应式的,可以自动更新,并且默认是只读的,它与methods的主要区别在于计算属性具有缓存性,而方法每次调用都会执行,使用computed可以使模板更加简洁,提高应用性能2024-09-09
使用elementUI table展开行内嵌套table问题
这篇文章主要介绍了使用elementUI table展开行内嵌套table问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论