uniapp 轮播图联动li悬停切换 - 实现方法及代码示例

您可以使用uniapp的事件绑定功能来实现此功能。您需要创建一个事件绑定函数，该函数将在li元素上注册鼠标悬停事件。当触发此事件时，您可以在函数中更改轮播图的索引并重新渲染轮播图。

以下是可能的实现：

1. 添加事件绑定函数：

<template>
  <div>
    <ul>
      <li v-for='(item, index) in items' :key='index' @mouseover='changeSlide(index)'>
        {{ item }}
      </li>
    </ul>
    <swiper :active-index='activeIndex'>
      <swiper-item v-for='(slide, index) in slides' :key='index'>
        <img :src='slide.image'>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      items: ['Slide 1', 'Slide 2', 'Slide 3'],
      slides: [
        { image: 'https://via.placeholder.com/500x250?text=Slide+1' },
        { image: 'https://via.placeholder.com/500x250?text=Slide+2' },
        { image: 'https://via.placeholder.com/500x250?text=Slide+3' }
      ]
    }
  },
  methods: {
    changeSlide(index) {
      this.activeIndex = index;
    }
  }
}
</script>

在此示例中，我们为每个li元素注册了一个mouseover事件，并在事件处理程序函数中更改了轮播图的活动索引。

2. 在CSS中添加样式以更改悬停的li元素的样式：

li:hover {
  background-color: #eee;
  cursor: pointer;
}

此样式将在鼠标悬停时更改li元素的背景颜色，并将鼠标光标更改为指针。

请注意，这只是一个基础示例，您可以根据自己的需求进行更改和扩展。