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 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
日本十大惊悚动漫
2020/03/04 日漫
php调用mysql存储过程实例分析
2014/12/29 PHP
JavaScript中的其他对象
2008/01/16 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python实现身份证号码解析
2015/09/01 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python脚本替换指定行实现步骤
2017/07/11 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
实习自我鉴定范文
2013/10/30 职场文书
教育孩子心得体会
2014/01/01 职场文书
大学旷课检讨书
2014/01/28 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
六一儿童节致辞
2015/07/31 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python