vue通过滚动行为实现从列表到详情,返回列表原位置的方法


Posted in Javascript onAugust 31, 2018

vue项目滚动行为

场景:项目中,从列表进入详情,再从详情返回列表时,想直接定位到离开时的位置。

列表页点击某一个进入到详情页:

vue通过滚动行为实现从列表到详情,返回列表原位置的方法

进入到详情页:

vue通过滚动行为实现从列表到详情,返回列表原位置的方法

从详情页点击返回到列表页到离开的位置:

vue通过滚动行为实现从列表到详情,返回列表原位置的方法

实现方式一:html5 history模式

1在路由设置router/index.js中,设置组件的元信息被缓存。(keepAlive:true),并修改mode模式为history。

export defaultnewRouter({
mode: 'history' // 默认hash
 routes: [
// ***************** 列表组件 ******************** //
 {
  path: '/',
  name: list,
  component: list,
  meta: {
  keepAlive: true
  }
 }

2该组件路由被匹配显示的方式:

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

实现方式二:监听scrollTop, js原始写法(组件同样需要设置缓存keep-alive)

1在组件的data中定义一个scrollTop属性,用来记录监听的scrollTop。

2在created或者mounted钩子里添加监听事件。

mounted () {
 document.addEventListener('scroll',this.handelscroll)
},

3在methods方法中定义这个handelscroll方法,并将监听的scrollTop赋值给data中的scrollTop()

handelscroll() {
 this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
},

4在deactivated钩子里记录当前的scrolltop(即从列表页进入详情页)

deactivated (){
 sessionStorage.setItem('scrollTop',this.scrollTop)
},

这里存到了sessionStorage里边,也可以使用状态管理。

5在activated钩子里,定位保存的scrollTop(即从详情页返回列表页)

activated () {
 document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem('scrollTop')
},

以上这篇vue通过滚动行为实现从列表到详情,返回列表原位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在视频前插入广告
Nov 20 Javascript
Prototype Function对象 学习
Jul 12 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
原生js实现弹幕效果
Nov 29 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 #Javascript
javascript闭包的使用之按钮切换功能
Aug 30 #Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 #Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 #Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 #Javascript
vue-router动态设置页面title的实例讲解
Aug 30 #Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 #Javascript
You might like
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
js实现简单页面全屏
2019/09/17 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
django-filter和普通查询的例子
2019/08/12 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
自我鉴定写作要点
2014/01/17 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
优秀经理获奖感言
2014/03/04 职场文书
二手房买卖协议书
2014/04/10 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers