vue-router中scrollBehavior的巧妙用法
发布时间：2020-12-17 03:09:27 所属栏目：百科 来源：网络整理
导读：问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: const router = new Router({ scrollBehavior(to,from,savedPosition) { if (savedPosition to.meta.keepAlive) { return savedPosition; } return { x: 0,y:0 }; },}); 2. 页面返回
|
问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: 2. 页面返回出现空白屏问题 问题 【前提】：iOS设备 【步骤】: 页面A是个列表很长-->滑到页脚的时候点击跳转之后到页面B--->再返回A页面 --->屏幕会出现空白遮罩层--->手指轻触屏幕滑动--->遮罩层消失
解决方案一在接口请求成功后的回调操作完成后进行该操作,例如 {
this.courses = courses;
}).then(() => {
setTimeout(() => {
window.scrollTo(0,1);
window.scrollTo(0,0);
});
});
该方案的弊端: 每个页面都需要做这样的处理，不推荐使用。 解决方案二(推荐)使用scrollBehavior中的异步滚动操作 {
setTimeout(() => {
resolve({ x: 0,y: 1 });
},0);
});
},});
该方案直接在路由进行处理，兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。 总结以上所述是小编给大家介绍的vue-router中scrollBehavior的巧妙用法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
