微信小程序webview中监听返回按钮实现步骤
更新时间：2024年08月07日 09:18:09 作者：略吃一二
在微信小程序中webview返回键是一个非常实用的功能,它允许用户在嵌入的网页中返回到上一个页面,这篇文章主要给大家介绍了微信小程序webview中监听返回按钮的实现步骤,需要的朋友可以参考下
项目场景
微信小程序页面A跳转—>webview页面首页B跳转—>webview列表页C跳转—>webview详情页面D，当在webview详情页面D采用router.push 回到---->webview页面首页B,此时在B页面点击左上角返回按钮会依次回到，D、C、B页面，需求是只要处于B页面点击左上角按钮直接返回A页面。
实现步骤
1.mounted钩子中监听左上角返回事件
mounted() {
// 往history中添加一条记录
this.pushHistory()
// 监听popstate事件
window.addEventListener('popstate',this.listenPopstate);
}
2.method中定义方法
methods: {
listenPopstate() {
// 判断是否在B页面
if (this.$route.path==='/accountdetail')
// 跳转小程序页面相关逻辑
},
pushHistory() {
window.history.pushState(null,null,null)
}
}
3.页面销毁前解绑事件监听
beforeDestroy() {
window.removeEventListener('popstate',this.listenPopstate);
}总结
到此这篇关于微信小程序webview中监听返回按钮实现的文章就介绍到这了,更多相关小程序webview监听返回按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇浅谈js函数中的实例对象、类对象、局部变量(局部函数)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了微信小程序如何加载数据库真实数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
下面小编就为大家带来一篇JS设计模式之数据访问对象模式的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章给大家总结下JavaScript数组去重的几种方法，面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法，感兴趣的朋友跟随脚本之家小编一起学习吧2021-10-10
这篇文章主要介绍了angularjs模态框的使用代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。本文就来利用Canvas实现满屏爱心和文字动画的制作，感兴趣的可以了解一下2022-11-11
range 是用户选择区域的唯一表示方法，存在 w3c 的标准化 range ，以及 ie 特有的 textrange 与 controlrange ，相对于 ie ，w3c 的概念更易于理解，首先简要介绍一下 w3c range.2011-08-08
这篇文章主要给大家介绍了关于js前端面试之同步与异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要介绍了JS修改iframe页面背景颜色的方法,涉及javascript操作iframe页面样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
等待控件在网上搜有好多种，但是都很复杂，不一定用的顺手，再说我的项目是bootstrap的原因，又不敢轻易使用第三方控件，怕不兼容，于是自己动手写了个等待控件，有需要的朋友可以参考下2015-10-10
最新评论