vue监听鼠标滚动事件

最新推荐文章于 2024-09-20 11:00:29 发布

依赖_赖

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量1.5w

点赞数 5

分类专栏： vue 文章标签：鼠标滚动菜单切换

本文链接：https://blog.csdn.net/weixin_39150852/article/details/92628462

版权

vue 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

<script>
    export default {
        name: "home",
        data(){
            return{
                currentId:1,
                listName: [] //滚动的列表
            }
        },
        methods:{
            //函数防抖
            debounce(func, wait) {
                let timeout;
                return function () {
                    let context = this;
                    let args = arguments;
                    if (timeout) clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        func.apply(context, args)
                    }, wait);
                }
            },
            //判断滚动方向
            handleScroll(e){
                let direction = e.deltaY > 0 ? 'down' : 'up'
                if(this.currentId <= 1){
                    direction == 'down'  ?  this.currentId++ : this.currentId = 1
                }else if(this.currentId>=this.listName.length){
                    direction == 'down' ? this.currentId = this.listName.length : this.currentId--
                }else{
                    direction == 'down' ? this.currentId++ : this.currentId--
                }
                //业务操作
                this.changeSel(this.currentId); 
            },

        },
        mounted () {
       		 //监听鼠标滚动事件
            window.addEventListener('mousewheel', this.debounce(this.handleScroll,300), true)||window.addEventListener("DOMMouseScroll",this.debounce(this.handleScroll,300),false)
        },
    }
</script>