vue中关于滚动条的那点事
vue中关于滚动条的那点事
不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端。最近半路加入一个项目,就遇到这种情况。(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过程:
什么情况下会出现滚动条的缓存?
之前想要滚动条在页面跳转时被缓存,需要自己设定keep-alive,
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
并且需要在路由中设定meta属性
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被缓存
}
}
]
})
在router的生命周期的钩子函数中获取当前滚动条位置,并将其存储起来
beforeRouteLeave(){
...//获取滚动条位置,并将其存储
}
在进入路由之前获取存储位置
beforeRouteEnter(){
...//获取滚动条位置,并将其赋值
document.body.scrollTop = ...
}
但是在我的这个项目中并没有设置keep-alive。然后就找了度娘,度娘中的小伙伴给出了解决方案,就是在vue官方文档
中vue-router
中的 滚动行为
,
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
对于所有路由导航,简单地让页面滚动到顶部。
返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模拟“滚动到锚点”的行为:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
但是文档中明确表示,这个功能只在支持 history.pushState 的浏览器中可用。还有一个但是,也是vue官方文档
的原话:vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
也就是说,不能拿来就用。
这可如何是好???
(此处省略一万字。。。)
接下来就是此次的重点了。。。。
在尝尽各种能想到的办法之后,就忽然想到一个简单粗暴的解决方案,直接代码:
watch: {
'$route' (to,from){
document.querySelector('.main').scrollTop = 0 //.main是本项目中overFlow:auto的盒子
}
}
在写有的文中设置监听,当路由改变时重置滚动条高度。
总结一下:
- 首先要看一下是否有写keep-alive
- 找出设置overFlow:auto的元素
- 设置监听属性
小编不才,如有言语不当或表述不清,勿喷,
如言语有误,望路过大神指点,不胜感谢!!!
vue中关于滚动条的那点事的更多相关文章
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- vue中修改滚动条样式
这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...
- vue 中<vue-scroll >滚动条回到顶部
今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...
- 关于 Vue 中 我对中央事线管理器的(enentBus)误解
由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值 我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/lo ...
- vue中动态引入图片为什么要是require, 你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
- axios在vue中的简单配置与使用
一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
- vue中嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
随机推荐
- ArcMap和ArcGIS Pro加载百度地图
前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...
- Python+Selenium - Web自动化测试(二):元素定位
前言 前面已经把环境搭建好了,现在开始使用 Selenium 中的 Webdriver 框架编写自动化代码脚本,我们常见的在浏览器中的操作都会有相对应的类方法,这些方法需要定位才能操作元素,不同网页的 ...
- Unity之与Web的交互
一.下载,安装,配置,启动Apache 1.进入官网下载Apache 2.解压到根目录 3.记事本打开如下配置文件 4.安装apache 5.出现错误:(该错误是由于端口被占用引起的) 6.修改配置文 ...
- 多线程编程学习六(Java 中的阻塞队列).
介绍 阻塞队列(BlockingQueue)是指当队列满时,队列会阻塞插入元素的线程,直到队列不满:当队列空时,队列会阻塞获得元素的线程,直到队列变非空.阻塞队列就是生产者用来存放元素.消费者用来获取 ...
- cogs 1377. [NOI2011] NOI嘉年华 (dp
题意:给你n个活动的起止时间,要你从中选一些活动在2个会场安排(不能有两个活动在两个会场同时进行),使活动较少的会场活动数最大,以及在某个活动必须选择的前提下,求该答案. 思路:由于n很小,时间很大, ...
- 8.8&8.9 dp训练小结
写了两天的dp题,表示大多dp都不会啊,还是爆搜大法好.我真的太蒻了dp还是要多做题啊,一些基本的套路还是不熟,真正写对的dp也就一道,还一道爆搜过的,dp还有很深的坑要填啊.. 8.8 T1 质数和 ...
- 【Offer】[54] 【二叉搜索树的第k小节点】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 给定一棵二叉搜索树,请找出其中第k小的节点.例如,在下图的二叉搜索树里,按节点数值大小顺序,第三小节点的值是4.  牛客网刷题地址 思 ...
- 手把手告诉你如何安装多个版本的node,妈妈再也不用担心版本高低引发的一系列后遗症(非常详细,非常实用)
简介 最近好多人都问到node怎么同时安装多个版本? 如何配置node的环境变量,如何自如的在多个版本中切换node?还有就是自己在做appium自动化的时候,有时候会因为node的版本过高或者是太低 ...
- 5分钟理解 SpringBoot 响应式的核心-Reactor
目录 一.前言 二. Mono 与 Flux 构造器 三. 流计算 1. 缓冲 2. 过滤/提取 3. 转换 4. 合并 5. 合流 6. 累积 四.异常处理 五.线程调度 小结 参考阅读 一.前言 ...
- Go语言标准库之context
在 Go http包的Server中,每一个请求在都有一个对应的 goroutine 去处理.请求处理函数通常会启动额外的 goroutine 用来访问后端服务,比如数据库和RPC服务.用来处理一个请 ...