uniapp中怎么设置左边一个li右边一个轮播图当鼠标停留在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>