别的不多说了 直接上代码吧
<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/
原文地址:https://www.cnblogs.com/taochengyong/p/12155997.html
时间: 2024-10-07 05:31:12