vue2中swiper的使用（swiper6)

项目场景：

前言：vue2的项目开发中因为使用swiper遇到了很多问题：

例如：怎么引用和使用，

原生直接按需引入swiper-bundle.min.js和swiper-bundle.min.css文件即可，

官方vue的使用也是在vue3的说明，没有vue2的使用文档

---

引入方法：

一、肯定是先安装依赖

npm install swiper@^6.8.4

二、局部引入

import { Swiper, Navigation, Pagination, Autoplay, Mousewheel } from 'swiper'; 
import 'swiper/swiper-bundle.css';
Swiper.use([Navigation, Pagination, Autoplay, Mousewheel]);

 这里除了Swiper是必须引入的话，其余的参数都是用到什么就加入什么,具体官方给我们提供了如下这些参数。(这里很好用的一个方法就是直接扒原码，能清楚知道可以用什么）

export {
  Swiper,
  SwiperOptions,
  A11y,
  Autoplay,
  Controller,
  EffectCoverflow,
  EffectCube,
  EffectFade,
  EffectFlip,
  HashNavigation,
  History,
  Keyboard,
  Lazy,
  Mousewheel,
  Navigation,
  Pagination,
  Parallax,
  Scrollbar,
  Thumbs,
  Virtual,
  Zoom,
};

---

使用方法：

html使用：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
 <!-- 如果需要分页器 -->
      <div
       ref="paginationBullets"
       class="swiper-pagination"
       slot="pagination"></div>
</div>

js中使用：

  /**
       * @description: 初始化整个首页的轮播
       */
     this.swiperFullPage = new Swiper('.swiper-container-parent', {
          spaceBetween: 0, //slide之间的距离（单位px）
          initialSlide: 0,
          direction: 'vertical',
          speed: 900, // 切换速度，即slider自动滑动开始到结束的时间（单位ms）
          resistance: false, // 边缘抵抗
          resistanceRatio: 0, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离
          slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)
          mousewheel: false,
          allowTouchMove: false, // 是否允许触摸滑动
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          on: {
            // 使用箭头函数，不然this指向有问题
            slideChangeTransitionStart: ()=> {
              this.isAnimation = true;
            },
            slideChangeTransitionEnd: (swiper) => {
              this.isAnimation = false; 
            },
          },
        });