uniapp中当鼠标停留在li上的时候右边跟着换一组轮播图
可以通过以下步骤实现:
-
给每个li绑定一个鼠标移入事件,可以使用@mouseover指令或者v-on:mouseover绑定事件。
-
在事件处理函数中,根据当前鼠标停留的li的索引值,切换右边的轮播图。
-
切换轮播图可以使用v-if指令控制哪个轮播图显示,或者动态改变轮播图的数据。
示例代码:
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" @mouseover="changeCarousel(index)">
{{ item }}
</li>
</ul>
<div>
<div v-if="activeIndex === 0">
<!-- 第一组轮播图 -->
</div>
<div v-else>
<!-- 第二组轮播图 -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ['选项1', '选项2'],
activeIndex: 0 // 默认显示第一组轮播图
}
},
methods: {
changeCarousel(index) {
if (index === 0) {
this.activeIndex = 0
} else {
this.activeIndex = 1
}
}
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/voY 著作权归作者所有。请勿转载和采集!