有人问道如何记录vue页面的滚动条位置,再次载入组件的时候页面滚动到记录的位置?



思路:
记录滚动条位置我们好记 我们要在组件销毁之前也就是页面跳转的时候 需要用到生命周期beforeDistory将位置记录下来
你可以存到vue中 那么如果我们用了keep-alive怎么办 他不会销毁组件啊 ? 那么我们就用到keep-alive的生命周期 的deactivated钩子中将位置记录下来 等到再次回到页面的时候 就需要等到 组件完全加载完毕 再设置滚动条的位置
这里我们用到vm.$nextTick()这个方法 来检测组件载入完毕 用到vue提供的方法scrollBehavior
scrollBehavior (to, from, savedPosition) {
//如果有存入的位置就会滚到该位置,否者返回到页面顶部
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
},

原文地址:https://segmentfault.com/a/1190000012494872

vue滚动行为的更多相关文章

  1. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  2. VUE 滚动插件(better-scroll)

    1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1 ...

  3. vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

    需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...

  4. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  5. vue滚动+滑动删除标记(移动端)仿qq/微信

    安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...

  6. [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题

    记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...

  7. pc端vue 滚动到底部翻页

    html: <div class="list" ref="scrollTopList"> <div class="listsmall ...

  8. vue滚动分页加载以及监听事件处理

    <template> <div class="bodyContainer"> <div class="allContent" id ...

  9. vue 滚动公告

    <!-- 滚动公告 --> <div class="textArr"> <p class="slice-enter-active" ...

随机推荐

  1. KafkaZookeeper1-整体介绍

    版本 1.0.0 概述 本文介绍了 kafka 中 zookeeper 的整体实现. 最初 kafka 使用同步的方式访问 zookeeper.但是对于 partition 个数很多的cluster, ...

  2. BZOJ 4289: PA2012 Tax(最短路)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 755  Solved: 240[Submit][Status][Discuss] Descriptio ...

  3. swift语言点评十一-Methods

    Assigning to self Within a Mutating Method Mutating methods can assign an entirely new instance to t ...

  4. 版本号比较[versionCompare]

    /*** * 版本号比较 * @param v1 版本号a * @param v2 版本号b * @return -1代表不是合格版本号:0代表一样大.1 代表版本号a大于版本号b.2代表版本号b大于 ...

  5. Manacher笔记

    (其实还是回文自动机好用,毛子真是牛逼) Manacher #include<iostream> #include<cstring> #include<cstdio> ...

  6. 使用 vue + thinkjs 开发博客程序记录

    一入冬懒癌发作,给自己找点事干.之前博客程序写过几次,php 的写过两次,nodejs 用 ThinkJS 写过,随着 ThinkJS 版本从1.x 升级到 2.x 之前的博客程序也做过升级.但是因为 ...

  7. svn文件管理器的使用

    服务器端: 客户端 使用SVN的注意事项 做任何操作之前,先update一下 不要修改其他人的文件 不要在SVN里直接打开.编辑文件 不要在打开.编辑文件的时候,进行操作 SVN客户端的安装,非常简单 ...

  8. openssh 升级到7.5p1

    1. 参照: http://www.cnblogs.com/xiegj/p/5669800.html http://blog.csdn.net/u011080082/article/details/5 ...

  9. 面试题——ArrayList和LinkedList的区别

    List概括 先回顾一下List在Collection的框架图: 从图中可以看出: List是一个接口,他继承Collection接口,代表有序的队列. AbstractList是一个抽象类, ,它继 ...

  10. Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应password复杂度验证函数步骤

    Oracle11g R2创建PASSWORD_VERIFY_FUNCTION相应密码复杂度验证函数步骤 运行測试环境:数据库服务器Oracle Linux 5.8 + Oracle 11g R2数据库 ...