Uniapp 鼠标滑过 LI 切换轮播图教程

可以通过监听鼠标滑过事件来实现轮播图的切换。具体步骤如下：

1. 在 template 中添加鼠标滑过事件监听：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @mouseover="changeSlide(index)">
        <img :src="item.imgUrl" alt="">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

2. 在 methods 中添加 changeSlide 方法来切换轮播图：

methods: {
  changeSlide(index) {
    this.currentSlide = index;
    if (index % 3 === 0) {
      this.slides = this.slides1;
    } else if (index % 3 === 1) {
      this.slides = this.slides2;
    } else {
      this.slides = this.slides3;
    }
  }
}

3. 在 data 中定义存储轮播图数据的变量，并初始化：

data() {
  return {
    list: [
      { imgUrl: 'https://xxx.xxx.jpg', title: 'title1' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'title2' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'title3' },
      // ...
    ],
    currentSlide: 0,
    slides1: [
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide1-1' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide1-2' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide1-3' },
      // ...
    ],
    slides2: [
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide2-1' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide2-2' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide2-3' },
      // ...
    ],
    slides3: [
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide3-1' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide3-2' },
      { imgUrl: 'https://xxx.xxx.jpg', title: 'slide3-3' },
      // ...
    ],
    slides: []
  }
},

4. 在 mounted 钩子函数中初始化轮播图数据：

mounted() {
  this.slides = this.slides1;
},

这样就可以实现当鼠标滑过 li 时轮播图跟着换一组的效果了。