Uniapp 实现鼠标悬停 Li 切换轮播图效果

可以使用 uniapp 中的 swiper 组件和 bind:mouseover 事件实现该效果。

1. 在页面中分别添加一个 ul 和一个 swiper 组件，给 ul 添加 li 元素，每个 li 元素添加一个 data-index 属性，用于记录当前 li 的索引值。
2. 给 ul 添加一个鼠标悬停事件 bind:mouseover，获取当前悬停的 li 的索引值，根据索引值切换 swiper 的当前项，显示对应的轮播图。
3. 在 swiper 组件中，设置属性 indicator-dots 为 true，表示显示轮播图的小圆点；设置属性 autoplay 为 true，表示自动播放轮播图；设置属性 interval 为 3000，表示轮播图的切换间隔为 3 秒。

示例代码如下：

<template>
  <view class="container">
    <ul class="nav" bind:mouseover="onMouseOver">
      <li data-index="0">菜单1</li>
      <li data-index="1">菜单2</li>
      <li data-index="2">菜单3</li>
    </ul>
    <swiper class="swiper" :current="current" indicator-dots autoplay interval="3000">
      <swiper-item>
        <image src="../../static/img/1.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/img/2.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../static/img/3.jpg"></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
data() {
return {
current: 0 // 当前轮播图的索引值
}
},
methods: {
onMouseOver(event) {
const index = event.target.dataset.index
if (index !== undefined && index !== null) {
this.current = parseInt(index)
}
}
}
}
</script>
<style>
.container {
display: flex;
}
.nav {
width: 200px;
height: 500px;
list-style: none;
padding: 0;
margin: 0;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.nav li:hover {
background-color: #ccc;
}
.swiper {
width: 400px;
height: 500px;
}
.swiper-item {
width: 100%;
height: 100%;
}
</style>