单页面全屏滚动效果使用element 跑马灯组件实例

Posted 2021-03-18 taochengyong

别的不多说了  直接上代码吧

<template>
    <div class="full-group" ref="fullGroup">
        <el-carousel direction="vertical" :autoplay="false" :loop="false" ref="carouselFull" @change="rollNumFn" :class="addClass === 1 ? ‘blue-class‘ : ‘‘">
            <el-carousel-item :key="1">
                <div class="full-item" :key="1">
                    <index-header></index-header>
                    <index-carousel :carouselData="carouselData"></index-carousel>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="2">
                <div class="full-item">
                    <index-operator></index-operator>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="3">
                <div class="full-item">
                    <index-map></index-map>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="4">
                <div class="full-item">
                    <index-case></index-case>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="5">
                <div class="full-item">
                    <index-news></index-news>
                </div>
            </el-carousel-item>
            <el-carousel-item :key="6">
                <div class="full-item">
                    <index-partner></index-partner>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

methods: {
        rollNumFn (val) {
            if (val === 1 || val === 3 || val === 5) this.addClass = 1
            else this.addClass = 0
        },
        deferred (fn, wait) {
            let timeout
            return function () {
                const context = this
                const args = arguments
                if (timeout) clearTimeout(timeout)
                timeout = setTimeout(() => {
                    fn.apply(context, args)
                }, wait)
            }
        },
        handleScroll (e) {
            if (e.deltaY > 0) this.$refs.carouselFull.next()
            else this.$refs.carouselFull.prev()
        },
        handleKeyup (e) {
            if (e.keyCode === 38) {
                this.$refs.carouselFull.prev()
            } else if (e.keyCode === 40) {
                this.$refs.carouselFull.next()
            }
        },
        eventListenerHandle (sign) {
            const dom = this.$refs.fullGroup
            dom[sign](‘mousewheel‘, this.deferred(this.handleScroll, 300), true) ||
            dom[sign](‘DOMMouseScroll‘, this.deferred(this.handleScroll, 300), false)
            window[sign](‘keyup‘, this.handleKeyup)
        }
    },
    mounted () {
        this.eventListenerHandle(‘addEventListener‘)
    },
    beforeDestroy () {
        this.eventListenerHandle(‘removeEventListener‘)
    }

　效果类似这种的http://www.37wan.net/