仿站网提醒您,本文共2043个字,系统预计阅读时间或需6分钟。
在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试。京东的效果如下图:
从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的demo吧。
前提:微信左上角的返回按钮其实无法被拦截,但是可以监听到这个返回事件。
思路:要想真正拦截返回事件,可以当前页面先向window.history中添加一个记录(实际只是在历史记录堆栈中添加一条记录pushState,浏览器并不会真正去加载这个路径),当点击返回时,监听到返回事件处理自己想处理的逻辑,反正微信它是一定要执行返回,刚添加的那条记录就会从window.history拿出并将此路径替换当前页面路径。注意:这里只是路径的替换,只是将路径换了个名字,并不是会真正去加载这个路径。
实现:demo里建立了两个vue页面(first 和 two),第一个页面跳转到到第二个页面。然后在第二个页面弹出一个蒙层,这时点击左上角返回时,并不是返回first,而是先将蒙层消失,再次点击返回时才是返回上一页;
实现效果如下:
相关代码讲解:
1 在第二个页面mounted方法中加入,添加监听返回事件方法。当返回按钮被点击时,这里让弹出的蒙层隐藏;
mounted() {
let that = this;
// 添加返回事件监听
window.addEventListener("popstate", function(e) {
that.isShowTestDiv = false;
}, false);
},
2 监听蒙层,当它显示时,在window.history(历史堆栈)中添加一条记录;
watch: {
isShowTestDiv: function(newVal, oldVal) {
if (newVal === true) {
this.pushHistory();
}
}
}
pushHistory() { // 修改history
var state = {
title: "",
url: "/two" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
};
window.history.pushState(state, state.title, state.url);
},
3 最后弹出的蒙层如果用户点蒙层上相关操作将蒙层关闭,那么要手动将自己添加的那条记录从history中移除,在vue将路由back一下即可。
helloClick() { // 点击弹出来的hello蒙板
this.isShowTestDiv = false;
this.$router.back(); // 将添加记录从history中移除
}
demo地址
gitHub:https://github.com/LiJinShi/wechat_back_vue
总结
以上所述是小编给大家介绍的微信浏览器左上角返回按钮拦截功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对仿站网www.ecmsw.cn网站的支持!
cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多。cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟。在众多...
仿站是我们很是熟悉的一个建站流程。根据您对网上某个网站的极其认可,喜欢,然后对它进行风格的仿制以及功能的仿制,以快速达到对方的水平,这就是...
仿站不同于网站设计与策划,选择仿站,我们可以省去大量设计的时间以及设计的费用,以及策划方案。学习别人的长处,沿袭别人的长处,在最短的时间内达...
从使用上讲是一样的; 仿站是指 参考某一个网站,全部或者大部分的仿照他的样式或功能 这样做出来,这样做简单,因为不用再进行页面的设计,及功能需...
今天仿站小编介绍站内站外需要注意的事项才能提高百度权重相关内容的介绍,感兴趣的朋友们可以跟着小编去下文了解一下哦看一个网站的受欢迎程...
做网站总的就是说需要域名 空间 程序3样内容。1.域名解析空间2.空间绑定域名只有这样你的网站输入域名才能才能被人找到,域名是买的,空间也是...
仿站网专业提供帝国cms仿站及二次开发,质量保证!仿站价格请询问客服。请在咨询时将仿站目标网址发送给客服。
您给我们一个目标站,我们还您一个相同的网站
按照您的要求,全新设计+开发您独一无二的网页
模板使用遇到问题,我们协助您快速解决
给我新功能需求,帮您定制开发并免费集成到网站
对现有程序不满意,需要做程序调整和效果增加
提供效果图/psd文件,还您一个网页设计
下面列出来了仿站建站的流程