vue 移动端监听页面滚动及跳转后返回原页面位置
百度了很多,但都是电脑端能用,手机端一点反应都没有。比如window.addEventListener....;document.documentElement.scrollTop....;等等,试了各种,就是不管用,终于找到了一个有用的。。。正解:!!!!!最外层盒子 绑定touchmove// 父盒子 -----最大的盒子<div @touchmove="handleTouchMove"
·
百度了很多,但都是电脑端能用,手机端一点反应都没有。比如
window.addEventListener....;
document.documentElement.scrollTop....;
等等,试了各种,就是不管用,终于找到了一个有用的。。。
正解:!!!!!
最外层盒子 绑定 touchmove
// 父盒子 -----最大的盒子
<div @touchmove="handleTouchMove">
</div>
js部分:
mounted() {
// 改一下 this 指向
let that = this;
window.addEventListener("scroll", that.handleTouchMove, true);
},
//页面销毁时 移除监听
destroyed() {
// 改一下 this 指向
let that = this;
window.removeEventListener("scroll", that.handleTouchMove, true);
},
// 离开当前页面时,记录页面滚动的高度
beforeRouteLeave(to, from, next) {
sessionStorage.homeaskPositon = this.scroll;
next();
},
// 进入当前页面时
beforeRouteEnter(to, from, next) {
if (!sessionStorage.homeaskPositon) {
//当前页面刷新不需要切换位置
sessionStorage.homeaskPositon = "";
next();
} else {
next((vm) => {
if (vm) {
// 看实际情况,show 是全屏加载,数据访问慢,所以加了加载动画 缓冲
// 延时器三秒后页面到跳转前的位置
vm.show = true;
setTimeout(function() {
window.scrollTo(0, sessionStorage.homeaskPositon);
vm.show = false;
}, 3000); //同步转异步操作
}
});
}
next();
},
methods: {
// 页面滚动方法
handleTouchMove() {
this.scroll=
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop
},
},
亲测可以,苹果 安卓的浏览器均可
更多推荐
所有评论(0)