有人问道如何记录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. Photoshop CC (2015.2) 2016.1 版

    1.设计空间(预览版)增强 Design Space (Preview) 2.画板 3.Surface Pro触屏优化(多种手势) 4.自定义工具栏和工作区 5.字体收藏夹(要死掉一批扩展) 6.库( ...

  2. inkscape

    最近的论文需要把latex公式放到图里,于是想起了装了之后一直没怎么用的inkscape.因为visio貌似没法直接贴latex格式的公式. 找了几个用法: http://blog.sciencene ...

  3. 005.JMS可靠性机制

    1. 消息接收确认 JMS消息只有在被确认之后,才认为已经被成功地消费了.消息的成功消费通常包含三个阶段: 客户接收消息 客户处理消息 消息被确认 在事务性会话中,当一个事务被提交的时候,确认自动发生 ...

  4. EL与JSTL学习(一)EL技术

    1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据(EL最重要的作 ...

  5. STM8S103之时钟设置

    最大时钟(指的是system clock):外部晶振24MHz,内部高速RC16MHz 三个时钟源:外部晶振.内部高速RC(上电默认) +内部低速RC 几个时钟:master clock(即sytem ...

  6. XML文件基础,DTD校验文件编写,Schema文件的简单使用

    dtd <!-- <!ELEMENT 元素(子元素,...)> --> <!ELEMENT students (student+,cat*) > <!ELEM ...

  7. .Net基础杂记

    1.面向对象程序思想 面向对象是程序开发的一种机制,特征为封装.继承.多态.以面向对象方式编写程序时,将复杂的项目抽象为多个对象互相协作的模型,然后编写模型结构,声明或实现类型的成员,即描述对象的特征 ...

  8. POJ-3436 ACM Computer Factory 最大流 为何拆点

    题目链接:https://cn.vjudge.net/problem/POJ-3436 题意 懒得翻,找了个题意. 流水线上有N台机器装电脑,电脑有P个部件,每台机器有三个参数,产量,输入规格,输出规 ...

  9. luogu P3414 SAC#1 - 组合数(组合数学)

    题意 求sigma(C(n,i))其中C是组合数(即C(n,i)表示n个物品无顺序选取i个的方案数),i取从0到n所有偶数. 由于答案可能很大,请输出答案对6662333的余数. (n<=101 ...

  10. AWS中国EC2 公网IP登录免pemKEY修改shh 配置文件

    个人使用记录 1:KEY 授权 chmod 400 VPN.pem 2:连接 ssh -i "VPN.pem" ubuntu@ec2-54-183-119-93.us-west-1 ...