vue+element实现鼠标滚轮控制轮播图

实现鼠标滚轮控制轮播图：

利用element走马灯，给其添加鼠标滚轮事件来实现鼠标滚轮控制轮播图

使用element走马灯:

<template>
  <div class="box">
  //添加@mousewheel鼠标滚轮事件
    <div style="height: 100%" @mousewheel="rollScroll($event)">
      <el-carousel
        direction="vertical"
        :autoplay="false"
        trigger="click"
        ref="carousel"
        @mousewheel="rollScroll($event)"
      >
        <el-carousel-item class="item" v-for="(item, index) in 4" :key="index">
          <div class="font">
            <h3>{{ item }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

鼠标滚轮事件（节流处理）

rollScroll(event) {
      let _that = this;
      // chrome、ie使用的wheelDelta，火狐使用detail
      let scrollVal = event.wheelDelta || event.detail;
      // 节流
      if (!_that.timeOut) {
        _that.timeOut = setTimeout(() => {
          _that.timeOut = null;
          scrollVal > 0
            ? _that.$refs.carousel.prev()
            : _that.$refs.carousel.next();
        }, 300);
      } else {
      }
    },

完整代码

<template>
 <div class="box">
   <div style="height: 100%" @mousewheel="rollScroll($event)">
     <el-carousel
       direction="vertical"
       :autoplay="false"
       trigger="click"
       ref="carousel"
       @mousewheel="rollScroll($event)"
     >
       <el-carousel-item class="item" v-for="(item, index) in 4" :key="index">
         <div class="font">
           <h3>{{ item }}</h3>
         </div>
       </el-carousel-item>
     </el-carousel>
   </div>
 </div>
</template>

<script>
export default {
 name: "home",

 data() {
   return {
     timeOut: null,
   };
 },
 methods: {
   rollScroll(event) {
     let _that = this;
     // chrome、ie使用的wheelDelta，火狐使用detail
     let scrollVal = event.wheelDelta || event.detail;
     // 节流
     if (!_that.timeOut) {
       _that.timeOut = setTimeout(() => {
         _that.timeOut = null;
         scrollVal > 0
           ? _that.$refs.carousel.prev()
           : _that.$refs.carousel.next();
       }, 300);
     } else {
     }
   },
 },
};
</script>

<style lang="scss">
.box {
 background-color: #ccc;
}
.el-carousel-item {
 width: 800px;
 height: 600px;
 background-color: skyblue;
}
.font {
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 h3 {
   font-size: 24px;
 }
}
</style>

结果：