有人问道如何记录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. CDN(Content Distribution Network)概念

    CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...

  2. javaEE的开发模式

    1.什么是模式 模式在开发过程中总结出的“套路”,总结出的一套约定俗成的设计模式 2.javaEE经历的模式 model1模式: 技术组成:jsp+javaBean model1的弊端:随着业务复杂性 ...

  3. UWP连接mysql 实现数据远程备份

    昨晚吃饭的时候突然觉得我们这个UWP应该添个数据备份的功能,不然换手机,换电脑之后数据库就全没了... 一开始是想用微软提供的AZURE的,没想到这玩意又没什么资料而且申请试用的时候还让我交身份证照片 ...

  4. 3ds Max 2018 在安装后无法启动或出现不稳定

    问题: 安装 3ds Max 2018 后,软件无法正常启动,或在打开后不久出现不稳定和崩溃. 原因: 有多种原因可能会导致这些错误: ▪ 3ds Max.Windows 更新和 ProSound.d ...

  5. ftp 一个账号多个家目录的解决方案

    通常,配置ftp时,一个ftp账号只对应一个家目录,不能有多个家目录的情况. 但是,根据公司开发项目的需求,需要做到一个ftp对应多个开发目录.有想过创建软链接的,可是发现通过ftp是访问不了的. 举 ...

  6. CF504E Misha and LCP on Tree(树链剖分+后缀树组)

    1A真舒服. 喜闻乐见的树链剖分+SA. 一个初步的想法就是用树链剖分,把两个字符串求出然后hash+二分求lcp...不存在的. 因为考虑到这个字符串是有序的,我们需要把每一条重链对应的字符串和这个 ...

  7. luogu P4018 Roy&October之取石子(博弈论)

    题意 题解 如果n是6的倍数,先手必败,否则先手必胜. 因为6*x一定不是pk 所以取得话会变成6*y+a的形式a=1,2,3,4,5: 然后a一定为质数.我们把a取完就又成为了6*x的形式. 又因为 ...

  8. cobbler Ubuntu16.04 安装

    cobbler vim /etc/debmirror.conf      sed -i 's/@dists=\"sid\";/#@dists=\"sid\";/ ...

  9. Unix发展史

    简述 了解过去,我们才能知其然,更知所以然.总结过去,我们才会知道明天该何去何从.在时间的滚轮中,许许多多的东西就像流星一样一闪而逝,而有些东西却能经受着时间的考验散发着经久的魅力,让人津津乐道.流传 ...

  10. Qt之滚动字幕

    简述 滚动字幕,也就是传说中的跑马灯效果. ​简单地理解就是:每隔一段时间(一般几百毫秒效果较佳)显示的文字进行变化(即滚动效果). 简述 实现 效果 源码 实现 利用定时器QTimer,在固定的时间 ...