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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 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内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
Python splitlines使用技巧
2008/09/06 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python爬取代理ip的示例
2020/12/18 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
经济管理专业自荐信
2013/12/30 职场文书
运动会稿件300字
2014/02/14 职场文书
信息技术课后反思
2014/04/27 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
本溪关门山导游词
2015/02/09 职场文书
小学运动会报道稿
2015/07/22 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python