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)}
},