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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
从vue源码看props的用法
Jan 09 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 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
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php简单的会话类代码
2011/08/08 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python 字典(dict)按键和值排序
2016/06/28 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
python dict 相同key 合并value的实例
2019/01/21 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
C# Debug和Testing相关面试题
2015/10/25 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
高三历史教学反思
2014/01/09 职场文书
京剧自荐信
2014/01/26 职场文书
2015年双拥工作总结
2015/04/08 职场文书
员工辞退通知书
2015/04/17 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
MySQL事务的隔离级别详情
2022/07/15 MySQL