vue的鼠标滚动切换路由（页面）事件

最新推荐文章于 2024-09-23 18:07:56 发布

原创

最新推荐文章于 2024-09-23 18:07:56 发布 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#VUE、mousewheel、vue-router

1、在vue项目开发中，有时候会遇到一个页面高度只有一个屏幕的高（甚至还不到），但这是就要实现鼠标的滚轮向前或向后滚动就切换路由即切换页面这个功能。
实现步骤：
一：给页面添加鼠标的滚动事件，

			//做鼠标滚轮事件的兼容
            // chrome and ie（谷歌和IE）
            window.addEventListener('mousewheel',this.handleScroll,false)
            // firefox（火狐）
            window.addEventListener("DOMMouseScroll",this.handleScroll,false)

这里火狐浏览器还有问题，暂时还没有解决，谷歌其他的正常。
二、在methods里写方法handleScroll

 handleScroll(e){
                //用来判断滚轮是向上滑动还是向下
                let direction = e.deltaY>0?'down':'up' 
                // console.log(direction)
                let arrList=this.navList
                //鼠标滚轮向下或后
                if(direction=='down'){
                    if(this.changeActive<arrList.length-1){
                        //选项卡激活的样式
                        this.changeActive=this.changeActive+1 
                        //跟随着选项卡而切换，以changeActive作为下标实现路由的path的读取
                        this.$router.push({path:arrList[this.cha