微信小程序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中的in-for循环。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。2016-08-08
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
这篇文章主要介绍了小程序组件传值和引入sass使用vant Weapp组件库,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
这篇文章主要为大家详细介绍了js实现转动骰子模型，自动随机生成骰子数的模型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了JavaScript作用域链,结合实例形式较为详细的分析了作用域链的原理、功能与相关操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了js实现简易的单数字0-9随机抽奖，可以控制抽取随机数开始与停止，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
JavaScript中轻松获取页面参数值的N种方法(含代码示例)
本文旨在深入浅出地揭示如何在JavaScript中巧妙提取那些隐藏在URL背后的宝贵信息,从基础方法到高级技巧,一网打尽,无论你是编程界的菜鸟还是久经沙场的老将,这里都有值得你品鉴的“珍馐”,需要的朋友可以参考下2024-06-06
Egg Vue SSR 服务端渲染数据请求与asyncData
这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
今天开发的时候，遇到要点击缩略图之后居中显示图片的大图查看（大致效果如上图所示）~想了好几种实现方式,下面通过本文给大家分享JS点击缩略图整屏居中放大图片效果，需要的朋友参考下吧2017-07-07
这篇文章主要介绍了详解JSON.stringify()的5个秘密特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论