vue+element实现鼠标滚轮控制轮播图
实现鼠标滚轮控制轮播图:使用element走马灯:<template><div class="box">//添加@mousewheel鼠标滚轮事件<div style="height: 100%" @mousewheel="rollScroll($event)"><el-carouseldirection="vertical":autoplay="fals
·
实现鼠标滚轮控制轮播图:
利用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>
结果:
更多推荐
已为社区贡献3条内容
所有评论(0)