<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>
Logo

前往低代码交流专区

更多推荐