Vue - 轮播组件的使用（vue-awesome-swiper）

vue-awesome-swiper官网：https://www.npmjs.com/package/vue-awesome-swiper
Swiper官网：https://www.swiper.com.cn/api/index.html

一. vue-awesome-swiper轮播组件使用

1. 安装 vue-awesome-swiper 依赖
   npm install swiper vue-awesome-swiper@3.1.3 --save

2. main.js中 引入 vue-awesome-swiper

   import VueAwesomeSwiper from 'vue-awesome-swiper'
   import 'swiper/css/swiper.css'
   Vue.use(VueAwesomeSwiper)
   

3. 测试 vue-awesome-swiper 是否可以正常使用
   测试代码：

   <template>
     <div class="wrap">
       <swiper :options="swiperOptions">
         <swiper-slide>Slide 1</swiper-slide>
         <swiper-slide>Slide 2</swiper-slide>
         <swiper-slide>Slide 3</swiper-slide>
         <swiper-slide>Slide 4</swiper-slide>
         <swiper-slide>Slide 5</swiper-slide>
         <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         swiperOptions: {},
       };
     },
   };
   </script>
   <style scoped>
   </style>
   

4. 若报错以下类似错误，请仔细查看本步骤；若无错误，页面正常显示，可跳过此步骤
   
   解决方案：
   4.1 进入 package.json 中查看 swiper 安装的版本
   发现版本是6.1.2
   
   4.2 如果安装6.0以上版本，需要引入另外一个 css
   import 'swiper/swiper-bundle.css'

二. 使用轮播图可能会遇到的问题

1. 轮播图左右箭头点击不生效
   原因：
   vue-awesome-swiper 安装版本原因
   解决方案：
   重新安装3.1.3版本 vue-awesome-swiper
2. 轮播图自动切换的时间间隔不生效
   原因：
   vue-awesome-swiper 安装版本原因
   解决方案：
   swiper-slide 添加属性 data-swiper-autoplay,属性值为时间（毫秒）
   

三. 一个轮播图实例

<template>
  <div class="wrap">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="item of 5" :key="item">
        {{ item }}
      </swiper-slide>
      <!-- Optional controls -->
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左箭头，上一个轮播图 -->
      <div
        class="swiper-button-prev swiper-button-whitehide hide"
        slot="button-prev"
      ></div>
      <!-- 右箭头，下一个轮播图 -->
      <div
        class="swiper-button-next swiper-button-white hide"
        slot="button-next"
      ></div>
      <!-- 滚动条 -->
      <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
    </swiper>
    <div class="textBtn">
      <div
        class="itme"
        v-for="(item,index) of 5"
        :key="item"
        @click="toSwiperSlide(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOption: {
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        //左右箭头点击
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 使用键盘的方向键控制slide切换
        keyboard: {
          enabled: true,
          onlyInViewport: false,
        },
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //自动播放，等同下面autoplay设置
        autoplay: true,
        // 设置轮播切换效果
        effect: "slide",
        //轮播切换动速度
        speed: 800,
        //轮播滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  mounted() {
    //可以使用swiper这个对象去使用swiper官网中的那些方法
    //console.log('this is current swiper instance object', this.swiper);
    // this.swiper.slideTo(0, 0, false);

    //鼠标移出隐藏按钮，移入显示按钮
    this.swiper.el.onmouseover = () => {
      this.swiper.navigation.$nextEl.removeClass("hide");
      this.swiper.navigation.$prevEl.removeClass("hide");
    };
    this.swiper.el.onmouseout = () => {
      this.swiper.navigation.$nextEl.addClass("hide");
      this.swiper.navigation.$prevEl.addClass("hide");
    };
  },
  methods: {
    toSwiperSlide(evt) {
      //切换到第一个slide，速度为1秒
      this.swiper.slideTo(evt, 1000, false);
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-container {
  width: 100%;
  height: 500px;
  background-color: #80c7ff;
  position: relative;
}
.swiper-pagination {
  position: absolute;
  z-index: 9;
  bottom: 0;
  width: 100%;
}
.swiper-pagination >>> .swiper-pagination-bullet {
  margin: 0 5px;
}
.hide {
  opacity: 0;
}
.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s;
  width: 35px;
  background-color: #2196f3;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: -1px; /* 设置按钮大小 */
}
.textBtn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itme {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2196f3;
  color: #fff;
  border-radius: 5px;
  margin: 0 5px;
  cursor: pointer;
}
</style>