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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
详解小程序输入框闪烁及重影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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
基于mysql的bbs设计(三)
2006/10/09 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
php实现的操作excel类详解
2016/01/15 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python性能优化的20条建议
2014/10/25 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
幼儿园新年寄语
2014/04/03 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
授权委托书怎么写
2014/09/25 职场文书
研究生导师评语
2014/12/31 职场文书
2015年中秋寄语
2015/07/31 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android