有人问道如何记录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. C++之const关键字

    本文引自http://www.cnblogs.com/lichkingct/archive/2009/04/21/1440848.html ,略有增删 const关键字在c++中用法有很多,总结如下: ...

  2. POJ 1979 Red and Black (简单dfs)

    题目: 简单dfs,没什么好说的 代码: #include <iostream> using namespace std; typedef long long ll; #define IN ...

  3. Pyinstaller 1 使用PyInstaller

    使用PyInstaller pyinstaller命令的语法是: pyinstaller[ options ] script [ script ...] | spec文件 在最简单的情况下,将当前目录 ...

  4. HDU 1043 Eight (A*算法)

    题目大意:裸的八数码问题,让你输出空格的一条合法移动路径 首先利用康托展开对排列编号,可以预处理出排列,就不必逆展开了 然后利用A*算法求解 A*算法是一种启发式搜索,具体实现要用到优先队列/堆,不同 ...

  5. salt 安装kubernetes集群3节点

    [root@linux-node1 k8s]# tree .├── etcd.sls├── files│   ├── cfssl-1.2│   │   ├── cfssl-certinfo_linux ...

  6. redhat 7 cenos 7 网络配置文件

    Cenos 7 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no DEFROUTE=yes IPV4_FAILURE_FATAL=no NAME=eth0 ...

  7. Java基础学习总结(4)——对象转型

    一.对象转型介绍 对象转型分为两种:一种叫向上转型(父类对象的引用或者叫基类对象的引用指向子类对象,这就是向上转型),另一种叫向下转型.转型的意思是:如把float类型转成int类型,把double类 ...

  8. Linux系统信息查看命令大全[转]

    系统 # uname -a               # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue   # 查看操作系统版本 # cat /proc/cpuinf ...

  9. Codeforces Round #271 (Div. 2) 解题报告

    题目地址:http://codeforces.com/contest/474 A题:Keyboard 模拟水题. 代码例如以下: #include <iostream> #include ...

  10. swift 给导航添加item,实现界面的跳转

    //给导航添加item         var rightItem = UIBarButtonItem(title: "First", style: UIBarButtonItem ...