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的一句话搞定手风琴菜单
Sep 14 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
webpack分离css单独打包的方法
Jun 12 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue路由--网站导航功能详解
2019/03/29 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JS实现放大镜效果
2020/09/21 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
《庐山的云雾》教学反思
2014/04/22 职场文书
行政专员求职信范文
2014/05/03 职场文书
电台编导求职信
2014/05/06 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
家电创业计划书
2019/08/05 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
我收到了德劲DE1107
2022/04/05 无线电
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server
Java使用HttpClient实现文件下载
2022/08/14 Java/Android