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 ...
随机推荐
- 04_枚举类型iota
iota是枚举类型的关键字,使用iota可以方便快捷的给常量赋值,主要体现在以下几个方面:1.iota常量自动生成器,每个一行加12.iota给常量赋值使用3.iota遇到const重置为04.可以写 ...
- 【原创】Linux Suspend流程分析
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- 噩梦(双向BFS)
给定一张N*M的地图,地图中有1个男孩,1个女孩和2个鬼. 字符“.”表示道路,字符“X”表示墙,字符“M”表示男孩的位置,字符“G”表示女孩的位置,字符“Z”表示鬼的位置. 男孩每秒可以移动3个单位 ...
- Asp.net之MsChart控件动态绑定温度曲线图
<div> <div style="position: absolute; z-index: 200; background-color: #FFFFFF; height: ...
- IDEA maven使用tomcat7插件启动报错:A child container failed during start
使用maven的tomcat7插件启动项目时出现上面的错误:A child container failed during start, 出现这个问题的原因是导入了servlet-api包,与tomc ...
- .NET敏感信息分离托管 娓娓道来
引言 互联网每隔一段时间就会爆出 [某程序猿在代码托管平台上传了公司机密配置信息,导致公司核心数据被黑客获取或修改], 一茬又一茬背锅侠层出不穷. 软件工程理论早以加粗字体给出 经典原则:Never ...
- vmware上安装的ubuntu连接不上网络
解决方法如下: 1.右键点击ubuntu,选择“设置” 2.网络适配器设置为“仅主机模式”:与主机共享的专用网络.点击“确定”即可.
- cogs249 最长公共子串(后缀数组 二分答案
http://cogs.pro:8080/cogs/problem/problem.php?pid=pxXNxQVqP 题意:给m个单词,让求最长公共子串的长度. 思路:先把所有单词合并成一个串(假设 ...
- POJ2084 Game of Connections 卡特兰数 关于卡特兰数经典的几个问题
Game of Connections Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 9128 Accepted: 44 ...
- Educational Codeforces Round 68 Editorial
题目链接:http://codeforces.com/contest/1194 A.Remove a Progre ...