vue监听滚动事件的方法


Posted in Vue.js onDecember 21, 2020

vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附; 2. 根据滚动的位置激活对应的tab键(锚链接tab键)

这两种方式的处理都是可通过监听scroll来实现

mounted(){
window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
}

处理方法

1. 滚动到顶部吸附

html元素

<!--如果isFixed为true的话,就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
这个是要滚动到顶部吸附的元素
</div>

methods方法

handleScroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量

let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量

this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了,this.isFixed就为true
}

2. 根据滚动的位置激活对应的tab键(锚链接tab键)

vue里实现锚链接,不能直接用a链接方式,因为用的是hash路由,直接a链接会跳转路由,可用scrollIntoView ,具体参照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 实现锚链接:

<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>

<div id="anchor1">block1</div>

(2) 实现滚动到相应的位置激活tab

data(){
return{


seeThis:0,


tabs:['tab0','tab1','tab2'],

}
},
methods:{

goAnchor(index) { // 也可以用scrollIntoView方法, 但由于这里头部设置了固定定位,所以用了这种方法


// document.querySelector('#anchor'+index).scrollIntoView()


this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)


document.body.scrollTop = anchor.offsetTop-100


document.documentElement.scrollTop = anchor.offsetTop-100

},
}
methods:{
handleScroll(){


var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100


var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100


var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100


if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){



this.seeThis = 0


}


if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){



this.seeThis = 1


}


if(scrollTop>anchorOffset2){



this.seeThis = 2


}

},
}

以上就是vue监听滚动事件的方法的详细内容,更多关于vue监听滚动事件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
You might like
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
JS实现图片切换效果
2018/11/17 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Python中的__init__作用是什么
2020/06/09 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
教研活动总结
2014/04/28 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
商超业务员岗位职责
2015/02/13 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android