Element UI 走马灯鼠标如何控制轮播以及每次鼠标滚动只轮播一张的解决方法。

最新推荐文章于 2024-04-29 17:45:34 发布

Maypleasecherish

最新推荐文章于 2024-04-29 17:45:34 发布

阅读量3.4k

点赞数 2

文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/Mayisheart/article/details/122384551

版权

Element UI 走马灯鼠标如何控制轮播以及每次鼠标滚动只轮播一张的解决方法。

摘要由CSDN通过智能技术生成

在做尚云官网首页轮播图时，我使用了Element UI 中的走马灯效果，但本效果并无鼠标滚轮控制效果（具体效果请看河北尚云科技官网），为了实现这一效果，我通过百度等各种方法，找到了一下解决方式，但并不推荐，因为 event 现在已经弃用，但还能实现效果，目前我还没有找到更好的方法。

一、在轮播图外的盒子外添加鼠标滚轮事件，触发GoWheel函数。

 @wheel="goWheel"

二、通过判断下面的数值来触发相应事件

event.deltaY

当鼠标滚轮向下滚动时，其返回值大于零，向上滚动时其返回值小于零。

通过ref 获取轮播图元素，再通过相应方法控制轮播图执行事件，详情见element ui 官网事件。

详细代码如下

<div @wheel="goWheel"> 
        
    <el-carousel height="100vh" direction="vertical" :autoplay="false" @change="load"             
           trigger="click" ref="swiper" :loop="false">


             <el-carousel-item>

             </el-carousel-it