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" ...
随机推荐
- IE9 下的ajax缓存问题的处理
使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 1 2 3 4 5 $.getJSON(webAp ...
- python中*号用法总结
python 中有很多地方用到星号,有时候会想知道这个*是干嘛用的,总结如下,有不当之处,还望不吝指出,谢谢.1.乘法: 在很多时候是用作乘法的,例如: In [90]: 2*7 Out[90]: 1 ...
- 列表的初识,列表的索引切片,列表的增删改查,列表的嵌套,元组的初识,range
1 内容总览 列表的初识 列表的索引切片 列表的增删改查 列表的嵌套 元组的初识(了解) 元组的简单应用(了解) range 2 具体内容 列表的初识 why: str: 存储少量的数据.切片出来全都 ...
- 用shell写一个简单DHCP配置脚本
轩轩写的这个小脚本,主要是可以进行对dhcp服务的安装.简单配置.开启.关闭/查看状态等情况 使用呢非常简单,按照步骤进行准确的设置就可以啦 #!/bin/bashyum -y install dhc ...
- vsftpd服务程序的三种认证模式
vsftpd服务程序的三种认证模式的配置方法——匿名开放模式.本地用户模式以及虚拟用户模式.了解PAM可插拔认证模块的原理.作用以及实战配置方法,通过实战课程进一步继续学习SELinux服务的配置方法 ...
- [ZJOI2008]骑士(基环树,树形dp)
[ZJOI2008]骑士 题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的 ...
- Eclipse中JSON文件报错,如何解决?
eclipse里面的JSON文件老报错,虽然可以正常运行,但红X看起来就是不爽,怎么解决呢? 这是因为Eclipse认为JSON文件不需要注释,所以报的编译错误,我们可以通过Eclipse的设置把它的 ...
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- CSS中的相关概念
CSS的几个概念: 包括块:一个元素的"布局上下文".对于正常的HTML文本流中的一个元素,包括块由近期的块级祖先框.表单元格或行内块祖先框的内容边界(content edge)构 ...
- 错误处理:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter
部署项目时,启动Tomcat一直出错:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter SEVE ...