开源手机建站系统,成都专业做网站,河南中国建设厅官方网站,手机论坛网站鼠标滚动切换页面
elementui Carousel 走马灯鼠标滚轮事件实现
一、在轮播图外的盒子外添加鼠标滚轮事件#xff0c;触发GoWheel函数。 wheelgoWheel二、通过判断deltaY的数值来触发相应事件
它检查滚轮事件的deltaY属性是否大于0
event.deltaY当鼠标滚轮向下…鼠标滚动切换页面
elementui Carousel 走马灯鼠标滚轮事件实现
一、在轮播图外的盒子外添加鼠标滚轮事件触发GoWheel函数。 wheelgoWheel二、通过判断deltaY的数值来触发相应事件
它检查滚轮事件的deltaY属性是否大于0
event.deltaY当鼠标滚轮向下滚动时其返回值大于零向上滚动时其返回值小于零。
三、通过ref 获取轮播图元素再通过相应方法控制轮播图执行事件详情见element ui 官网事件。
this.$refs.swiper.next();this.$refs.swiper.prev();代码
div wheelgoWheel el-carousel height100vh directionvertical :autoplayfalse changeload triggerclick refswiper :loopfalseel-carousel-item/el-carousel-item/el-carousel/divel-carousel-item里面放切换的图片或视频 goWheel() {if (event.deltaY 0 this.onetrue) { //data中定义one为true 当one为true时执行this.$refs.swiper.next(); //以此来控制每次轮播图切换的张数this.onefalse;setTimeout((){this.onetrue},1000)}if (event.deltaY 0 this.onetrue) {this.$refs.swiper.prev();this.onefalse;setTimeout((){this.onetrue},1000)}
},
