vue 轮播图飞屏互动

Vue 轮播图飞屏互动可以通过以下步骤实现：

1. 安装 Vue 插件：vue-awesome-swiper。
2. 引入插件并配置轮播图组件。
3. 在轮播图组件中添加动画效果和交互事件。

下面是具体实现方法：

1. 安装 Vue 插件：vue-awesome-swiper。

npm install vue-awesome-swiper --save

2. 引入插件并配置轮播图组件。

在 Vue 组件中引入插件，并在 data 中定义轮播图的配置项：

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        effect: 'fade',
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}

其中，loop 表示循环播放，effect 表示切换效果为淡入淡出，autoplay 表示自动播放，pagination 表示分页器。

3. 在轮播图组件中添加动画效果和交互事件。

可以通过以下方法实现轮播图飞屏互动效果：

<swiper :options="swiperOption" @slideChange="onSlideChange">
  <swiper-slide v-for="(item, index) in list" :key="index">
    <div class="slide-item" :class="{ active: currentIndex === index }">
      <img :src="item.imgUrl" alt="">
    </div>
  </swiper-slide>
  <div class="swiper-pagination"></div>
</swiper>

<script>
export default {
  data() {
    return {
      list: [
        { imgUrl: 'http://placehold.it/400x400', link: 'http://www.baidu.com' },
        { imgUrl: 'http://placehold.it/400x400', link: 'http://www.sina.com' },
        { imgUrl: 'http://placehold.it/400x400', link: 'http://www.qq.com' }
      ],
      currentIndex: 0
    }
  },
  methods: {
    onSlideChange() {
      this.currentIndex = this.$refs.swiper.realIndex
    }
  }
}
</script>

<style scoped>
.slide-item {
  position: relative;
  height: 300px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .active {
    animation: 2s fly-screen infinite;
  }
}
@keyframes fly-screen {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

在每个轮播图项上添加 active 类名，并定义一个动画效果 fly-screen，实现飞屏的效果。同时，在 slideChange 事件中更新当前轮播图项的索引 currentIndex。

以上是 Vue 轮播图飞屏互动的实现方法。