Element UI 走马灯 实现鼠标滚动切换页面
鼠标滚动切换页面
elementui Carousel 走马灯+鼠标滚轮事件实现
一、在轮播图外的盒子外添加鼠标滚轮事件，触发GoWheel函数。
@wheel="goWheel"
二、通过判断deltaY的数值来触发相应事件
它检查滚轮事件的deltaY属性是否大于0
event.deltaY
当鼠标滚轮向下滚动时，其返回值大于零，向上滚动时其返回值小于零。
三、通过ref 获取轮播图元素，再通过相应方法控制轮播图执行事件，详情见element ui 官网事件。
this.$refs.swiper.next();this.$refs.swiper.prev();
代码
<div @wheel="goWheel"> <el-carousel height="100vh" direction="vertical" :autoplay="false" @change="load" trigger="click" ref="swiper" :loop="false"><el-carousel-item></el-carousel-item></el-carousel></div>
el-carousel-item里面放切换的图片或视频
goWheel() {if (event.deltaY > 0 && this.one==true) { //data中定义one为true 当one为true时执行this.$refs.swiper.next(); //以此来控制每次轮播图切换的张数this.one=false;setTimeout(()=>{this.one=true},1000)}if (event.deltaY < 0 && this.one==true) {this.$refs.swiper.prev();this.one=false;setTimeout(()=>{this.one=true},1000)}
},