需求:在垂直方向上可以通过滚动鼠标,来实现每次只轮播一张图片。
实现:
html部分:
<!-- 在轮播图外的盒子外添加鼠标滚轮事件,触发goWheel函数 -->
<div @wheel="goWheel">
<el-carousel
ref="swiper"
height="100vh"
indicator-position="none"
:loop="false"
direction="vertical"
:autoplay="false"
>
<el-carousel-item>
<!-- 这里轮播的是视频 -->
<video class="video_item" loop autoplay muted src="../../assets/video/1.mp4"></video>
</el-carousel-item>
</el-carousel>
</div>
js部分:
<script setup>
import {
ref } from "vue";
const one = ref(true); //当one为true时执行轮播。以此来控制每次轮播图切换的张数为1
const swiper = ref(null);
function goWheel(event) {
// 当鼠标滚轮向下滚动时,其返回值大于零,向上滚动时其返回值小于零
if (event.deltaY > 0 && one.value) {
swiper.value.next();
one.value = false;
setTimeout(() => {
one.value = true;
}, 500);
}
if (event.deltaY < 0 && one.value) {
swiper.value.prev();
one.value = false;
setTimeout(() => {
one.value = true;
}, 500);
}
}
</script>