vue滚动行为
有人问道如何记录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滚动行为的更多相关文章
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- VUE 滚动插件(better-scroll)
1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- vue滚动+滑动删除标记(移动端)仿qq/微信
安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...
- [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题
记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...
- pc端vue 滚动到底部翻页
html: <div class="list" ref="scrollTopList"> <div class="listsmall ...
- vue滚动分页加载以及监听事件处理
<template> <div class="bodyContainer"> <div class="allContent" id ...
- vue 滚动公告
<!-- 滚动公告 --> <div class="textArr"> <p class="slice-enter-active" ...
随机推荐
- Servlet学习(七)——cookie
一.会话技术简介 1.存储客户端的状态 例如网站的购物系统,用户将购买的商品信息存储到哪里?因为Http协议是无状态的,也就是说每个客户访问服务器端资源时,服务器并不知道该客户端是谁,所以需要会话技术 ...
- php查询字符串是否存在 strpos
/*** 查询字符是否存在于某字符串** @param $haystack 字符串* @param $needle 要查找的字符* @return bool*/function str_exists( ...
- django框架-Admin管理站点搭建
在django框架中,admin基本上算是已经写好了的,拿过来进行简单的处理即可以使用的,相对于flask来说已经是相当的便捷了. 在使用中,步骤如下: 1.管理界面本地化:即将英文标题等的变成中文, ...
- nginx开启gzip压缩后导致apk包下载不能正常安装
最后更新时间:2019/4/27 nginx一般都会开启gzip压缩,以提升传输性能. 配置如下: gzip on; gzip_comp_level 2; gzip_min_length 1k; gz ...
- python 模块一览
一个模块可以对应一个文件 同一个模块,可以import多次,但只会被导入一次 模块的导入顺序 导入模块写在文件最上面 自己写的和内置的以及扩展的分开 顺序:内置,扩展,自己写的 按字母大小写排序 一行 ...
- 12个Unity5中优化VR 应用的技巧
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50176429 作者:car ...
- Myeclipse学习总结(7)——Eclipse插件之Maven配置及问题解析
前言: 今天在自己环境装了Maven环境, 并且安装了Eclipse插件, 在查找插件过程中确实遇到一些问题, 好不容易找到一个 却又有问题. 装好了插件之后, 用Eclipse创建Maven项目却 ...
- [terry笔记]redhat5.5_11gR2_RAC_安装
redhat5.5_11gR2_RAC_安装,这篇主要记录RAC安装的执行步骤,最烦琐的就是前期配置,到后面图形界面runInstaller,asmca,dbca就很容易了. --hostname检查 ...
- [Typescript] Build Method decorators in Typescript
To using decorate, we can modifiy tsconfig.json: { "compilerOptions": { ... "experime ...
- JS在页面限制checkbox最大复选数
应该是挺简单的代码, 记录一下分享. 首先最直接的想法就是使用循环, 用局部变量记录已选的checkbox, 达到最大值就将余下的checkbox都禁止选择, 例如以下: <!DOCTYPE h ...