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 相关文章推荐
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
js实现移动端轮播图滑动切换
Dec 21 Javascript
Vue实现下拉加载更多
May 09 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
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python 数据加密代码
2008/12/24 Python
python二分法实现实例
2013/11/21 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
在Python中使用元类的教程
2015/04/28 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
教师辞职信范文
2015/02/28 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
活动费用申请报告
2015/05/15 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
化工生产实习心得体会
2016/01/22 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL