vue 移动端监听页面滚动及跳转后返回原页面位置
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
百度了很多,但都是电脑端能用,手机端一点反应都没有。比如
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
},
},
亲测可以,苹果 安卓的浏览器均可
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)