鼠标滚动切换页面
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-carouselheight="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)}},
本文转载自: https://blog.csdn.net/qq_52126119/article/details/134649715
版权归原作者 颖儿♡＾▽＾♡ 所有， 如有侵权，请联系我们删除。
版权归原作者 颖儿♡＾▽＾♡ 所有， 如有侵权，请联系我们删除。