Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置


Posted in Javascript onMay 27, 2019

前提:

之前写过关于keep-Alive组件,来实现在列表页进入详情页后,后退,返回列表,显示上次访问的位置(原理就是缓存列表页数据来实现),目前发现另外一个问题,就是如果后台操作改变数据的状态,缓存的办法就会导致数据更新不及时导致一些页面错误(例如:商品疑问,在后台答复之后,不可以修改内容,前台更新不及时就会导致,前台显示可编辑,但实际状态是不可编辑了),所以又继续研究另外一种解决办法,scrollBehavior 来实现。

简介:

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

官方文档简介: 滚动行为

使用方法:

const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {
 // return 期望滚动到哪个的位置
 }
})

或者集成模式写法:

utils.js

export function scrollBehavior (to, from, savedPosition) {
 // return 期望滚动到哪个的位置
}

index.js

import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({
 mode: 'history',
 scrollBehavior,
 routes: [
 ...routesPC,
 ...routesMO
 ]
})
export default router

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

在该方法内,可以通过判断路由to,from两个对象来做一些必要的判断;

savedPosition 参数是记录的上次滚动的位置;

通过return {x:number,y:number}来控制页面滚动的位置;

对于所有路由导航,简单地让页面滚动到顶部。

scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
}

想要在后退时,滚动到上次滚动的位置,如果满足条件,savedPosition有值的情况下:

scrollBehavior (to, from, savedPosition) {
 if (savedPosition) {
 return savedPosition
 } else {
 return { x: 0, y: 0 }
 }
}

新增情况:异步滚动

当页面数据需要请求加载有延迟的情况下,页面如果直接滚动,会出现滚动后,页面数据请求回来,DOM重新渲染,滚动失效的情况;

所以官方文档给补充了异步滚动的方法:

scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve({ x: 0, y: 0 })
  }, 500)
 })
}

这个会在返回后,有一定延迟再滚动,可以根据自己项目的具体情况进行一定修改,兼容;

注:我的项目mobile端数据加载使用的是vue-mugen-scroll滑动加载数据组件,网上没找到能触发它加载的方法,所以,在返回列表页后,数据刷新,只有一页数据,滚动到底,也找不到上次的数据,呜呜呜......所以还是没有解决我的问题,但是这个方法是很好的,只是使用情况,会有限制,记录一下,以备后用。

总结

以上所述是小编给大家介绍的Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
微信小程序实现图片上传功能
May 28 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
详解JS函数防抖
Jun 05 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
通过jQuery学习js类型判断的技巧
May 27 #jQuery
实现高性能javascript的注意事项
May 27 #Javascript
图解javascript作用域链
May 27 #Javascript
node.js命令行教程图文详解
May 27 #Javascript
详解JavaScript中的坐标和距离
May 27 #Javascript
优化Vue项目编译文件大小的方法步骤
May 27 #Javascript
了解JavaScript表单操作和表单域
May 27 #Javascript
You might like
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
python 计算文件的md5值实例
2017/01/13 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
《乡愁》教学反思
2014/02/18 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
工资证明格式模板
2015/06/12 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL