关于vue使用swiper方法

第一种方法：通过vue，利用大佬的插件，简单的使用swiper操作

第二种方法：通过以前的三件套引入方法使用

下面我会一一说到。

效果先览

官方文档基于Vue3

这样导入文件是会出现错误的

 // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

方法一

那就使用大佬的vue-awesome-swiper来解决问题

下方是文档连接 vue-awesome-swiper 采用一一对应的原则

1. 引入最新版：npm install vue-awesome-swiper@4.1.1 --save

   下图是上述网站Github得使用方法

2. 我们尽量安装版本号限制在5版本：npm install swiper@5.X --save

   因为我测试了一次较高版本出现了错误

3. 引入 全局、局部 都可

   import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
   import 'swiper/css/swiper.css';
   

4. 在vue文件中用法：

   在结构上

    <div class="home">
             <swiper
             class="swiper"
             :options="swiperOption"
              @slideChange="onSlideChange"
              ref = "mySwiper"
         >
           <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>
           <swiper-slide>Slide 6</swiper-slide>
         </swiper>
      </div>
   

   在引用，方法处理上

       import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
       import 'swiper/css/swiper.css';
       export default {
         name: 'Home',
         data(){
           return{
               swiperOption: {
                 slidesPerView: 3,
                 spaceBetween: 30,
                 pagination: {
                   el: '.swiper-pagination',
                   clickable: true
                 }
               }
           }
         },
         components: {
            Swiper,
            SwiperSlide,
         },
         methods:{
             onSlideChange(){
               console.log('111');
             }
         },
       }
   

   我写了点css样式

   <style lang="less">
     .home{
       .swiper{
         height: 300px;
         .swiper-slide{
           background-color: rebeccapurple;
         }
       }
     }
   </style>
   

5. 如果想使用点击就可切换swiper的图片

    this.$refs.mySwiper.$swiper.slideTo(currentIndex)
   

方法二

1. 在vue文件下终端中引入：npm install swiper

2. 引入文件

   import Swiper from 'swiper';
   import 'swiper/swiper-bundle.css';
   import 'swiper/swiper-bundle.js';
   

3. 写method的方法

    _initSwiper(){
         var swiper = new Swiper(".swiper-container", {
           spaceBetween: 60,
           pagination: {
             el: ".swiper-pagination",
             clickable: true,
           },
         });
       },
   

4. 在mounted中应用

     mounted() {
        this._initSwiper();
     },