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全部源代码
May 04 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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中使用gd库实现远程图片下载实例
2015/05/12 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
CI框架常用函数封装实例
2016/11/21 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue数据响应式原理知识点总结
2020/02/16 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
Python入门篇之字典
2014/10/17 Python
Python脚本实现格式化css文件
2015/04/08 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
网上商城创业计划书范文
2014/01/31 职场文书
简历的自我评价
2014/02/03 职场文书
购房意向书
2014/04/01 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书