vue鼠标滚轮滚动上下页，点击下页，并开始轮播

最新推荐文章于 2024-05-23 10:34:55 发布

维阿先生

最新推荐文章于 2024-05-23 10:34:55 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_27951873/article/details/126544571

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


let timer;
export default {
    data () {
        return {
            _lastTime: '',
            bigScreenData: [],
            currentPage: 0
        }
    },
    mounted () {
        window.addEventListener('mousewheel', this.handleWheel)
        window.addEventListener('click', this.handleClick);
    },
    methods: {
        updateCurrentPage (index) {
            // 处理页面
        },
        handleWheel (e) {
            e.stopPropagation()
            this.throttle(this.pageUpOrDown, 600)(e)
        },
        throttle (fn, gapTime) {
            //节流函数
            let _this = this
            return function () {
                let _nowTime = +new Date()
                if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
                    fn(...arguments)// 函数可以带参数
                    _this._lastTime = _nowTime
                }
            }
        },
        pageUpOrDown (e) {
            let len = this.bigScreenData.length
            if (len > 1) {
                let pageIndex = this.currentPage;
                if (e.deltaY > 0) {
                    //向下 wheelDelta <0
                    pageIndex++;
                    if (pageIndex >= len) {
                        pageIndex = 0
                    }
                } else if (e.deltaY < 0) {
                    //向上 wheelDelta >0
                    pageIndex--;
                    if (pageIndex < 0) {
                        pageIndex = len - 1
                    }
                }
                this.updateCurrentPage(pageIndex);
                clearInterval(timer);
                this.shufflingFun()
            }
        },
        handleClick (e) {
            let len = this.bigScreenData.length
            if (len > 1) {
                let pageIndex = this.currentPage + 1;
                if (pageIndex >= len) {
                    pageIndex = 0
                }
                this.updateCurrentPage(pageIndex);
                clearInterval(timer);
                this.shufflingFun()
            }
        },
        shufflingFun () {
            let _this = this
            timer = setInterval(() => {
                console.log(_this.currentPage)
                let pageIndex = _this.currentPage + 1
                if (pageIndex >= _this.bigScreenData.length) {
                    pageIndex = 0;
                }
                _this.updateCurrentPage(pageIndex);
            }, 5000); // 页面滚动间隔 5 秒
        }
    },
    created () {
        if (timer) {
            clearInterval(timer);
            timer = ''
        }
    },
    beforeDestroy () {
        if (timer) {
            clearInterval(timer);
            timer = ''
        }
    },
}