vue-router中scrollBehavior的巧妙用法


Posted in Javascript onJuly 09, 2018

问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题

解决方案:

<div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  return { x: 0, y:0 };
 },
});

2. 页面返回出现空白屏问题

问题

【前提】:iOS设备
【步骤】: 页面A是个列表很长-->滑到页脚的时候点击跳转之后到页面B--->再返回A页面
         --->屏幕会出现空白遮罩层--->手指轻触屏幕滑动--->遮罩层消失

vue-router中scrollBehavior的巧妙用法 

解决方案一

在接口请求成功后的回调操作完成后进行该操作,例如

// fetchCourseList是一个封装好的Promise请求
fetchCourseList().then(({ data: courses }) => {
 this.courses = courses;
}).then(() => {
  setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
  });
});

该方案的弊端: 每个页面都需要做这样的处理,不推荐使用。

解决方案二(推荐)

使用scrollBehavior中的异步滚动操作

const router = new Router({
 scrollBehavior(to, from, savedPosition) {
  // keep-alive 返回缓存页面后记录浏览位置
  if (savedPosition && to.meta.keepAlive) {
   return savedPosition;
  }
  // 异步滚动操作
  return new Promise((resolve) => {
   setTimeout(() => {
    resolve({ x: 0, y: 1 });
   }, 0);
  });
 },
});

该方案直接在路由进行处理,兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。

总结

以上所述是小编给大家介绍的vue-router中scrollBehavior的巧妙用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery链式操作的正确使用方法
Jan 06 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue实现循环切换动画
Oct 17 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
JS逻辑运算符短路操作实例分析
Jul 09 #Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 #Javascript
使用async await 封装 axios的方法
Jul 09 #Javascript
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
Smarty3配置及入门语法
2017/02/22 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python检测远程端口是否打开的方法
2015/03/14 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
师范学院毕业生求职信范文
2013/12/26 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
学校标语大全
2014/06/19 职场文书
中学教师教学工作总结
2015/08/13 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技