uniapp中当鼠标悬停在li上的时候轮播图也跟着换
可以通过监听鼠标的hover事件,在事件回调函数中修改轮播图的显示内容。以下是一个示例代码:
<template>
<div class="carousel-wrapper" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<div v-if="showImage">
<img src="https://example.com/image.jpg">
</div>
</div>
</template>
<script>
export default {
data() {
return {
showImage: false,
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
}
},
methods: {
handleMouseOver() {
this.showImage = true;
},
handleMouseOut() {
this.showImage = false;
}
}
}
</script>
<style>
.carousel-wrapper {
position: relative;
}
.carousel-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
在上面的示例中,当鼠标悬停在li元素上时,会显示一个固定的图片,可以根据需求修改为轮播图。需要注意的是,为了让图片或轮播图显示在li元素上方,需要设置图片或轮播图的position为absolute,并且设置z-index值较大。
原文地址: https://www.cveoy.top/t/topic/uVB 著作权归作者所有。请勿转载和采集!