vue3.0中使用swiper

由于普通的ui组件库中的轮播图无法满足需求，因此使用了这个库。

效果图如下：

1. 安装swiper npm i swiper现在下载默认6x版本的，6x版中封装了组件，可以在vue中直接使用。用法跟以前不一样！！ ，部分api也不对。

<template>
  <div>
    <a-row type="flex" justify="center">
      <a-col :xs="0" :sm="0" :md="0" :lg="20" :xl="20" class="swiper_box">
        <swiper
          :autoplay="swiper_options.autoplay"
          :loop="swiper_options.loop"
          :speed="swiper_options.speed"
          :pagination="swiper_options.pagination"
          :navigation="swiper_options.navigation"
          :spaceBetween="swiper_options.spaceBetween"
          :coverflowEffect="swiper_options.coverflowEffect"
          :centeredSlides="swiper_options.centeredSlides"
          :slidesPerView="swiper_options.slidesPerView"
          class="swiper"
          effect="coverflow"
        >
          <swiper-slide
            ><img class="my_swiper_imgs" src="../../../assets/1.jpg" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img class="my_swiper_imgs" src="../../../assets/2.jpg" alt=""
          /></swiper-slide>
          <swiper-slide
            ><img class="my_swiper_imgs" src="../../../assets/3.jpg" alt=""
          /></swiper-slide>
        </swiper>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import "./MySwiper.less";
import {
      reactive } from "vue";
// 使用swiper的compositon API
import SwiperCore, {
      Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";
import {
      Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.less";
import "swiper/components/navigation/navigation.less";
SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);
export default {
     
  name: "MySwiper",
  components: {
     
    Swiper,
    SwiperSlide,
  },
  setup() {
     
    // swiper相关配置属性放在swiper_options这个变量里
    let swiper_options = reactive({
     
      autoplay: {
     
        disableOnInteraction: false, // 鼠标滑动后继续自动播放
        delay: 4000, //4秒切换一次
      },
      speed: 500, //切换过渡速度
      loop: true,
      slidesPerView: "auto", //解决最后一张切换到第一张中间的空白
      centeredSlides: true, //设置slide居中
      spaceBetween: 20,
      coverflowEffect: {
     
        // rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
        stretch: 50, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
        depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier: 1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
        // slideShadows: false, //开启slide阴影。默认 true。
      },
      navigation: {
     
        nextElRef: ".swiper-button-next",
        prevElRef: ".swiper-button-prev",
      },
      pagination: {
     
        clickable: true,
      },
    });
    // 将swiper_options返回给模板中的swiper组件使用
    return {
      swiper_options };
  },
};
</script>

上述代码只说一样跟以前不一致的地方：

• 引入 import SwiperCore, { Autoplay, Pagination, EffectCoverflow,Navigation } from "swiper";import { Swiper, SwiperSlide } from "swiper/vue";
  需要引入组件和一些配置项，这里我的轮播图需要自动播放（Autoplay），小圆点（Pagination），切换效果（EffectCoverflow），左右按钮（Navigation ）。
• 导入样式

  import "swiper/swiper.min.css"; // 整个轮播图的样式
  import "swiper/components/pagination/pagination.less";  // 分页器的样式
  import "swiper/components/navigation/navigation.less"; // 左右按钮的样式
  

• 注册配置项 SwiperCore.use([Autoplay, Pagination, EffectCoverflow,Navigation]);
• 在setup中写具体配置的时候需要注意有几个不一样的地方

    navigation: {
         
      nextElRef: ".swiper-button-next",
      prevElRef: ".swiper-button-prev",
    },
  

  跟以前不一样。
• MySwiper.less

  .swiper {
         
      max-height: 600px;
  }
  body {
         
      overflow-x: hidden;
  }
  .swiper_box {
         
    .swiper-slide {
         
      width: 600px;
      height: 400px;
      // border: 1px solid rgba(255, 255, 255,0);
      box-shadow: 0 2px 6px rgb(133, 133, 133);
  }
  .swiper-slide>img {
         
      width: 100%;
      height: 100%;
  }
  .swiper-container {
         
      margin-top: 20px;
      width: 100%;
      height: 520px;
      // margin-bottom: 53px;
      overflow: visible !important;
      margin-bottom: -30px;
    }
   
    .swiper-container .swiper-wrapper .swiper-slide {
         
      width: 1200px;
      border-radius: 2px;
      height: 480px;
    }
   
    .swiper-container .swiper-wrapper .swiper-slide img {
         
      width: 100%;
      height: 100%;
      border-radius: 2px;
   
    }
   
     .swiper-slide.swiper-slide-active:before {
         
      opacity: 0;
     }
     .swiper-container .swiper-pagination {
         
      bottom:60px;
    }
   
    .swiper-pagination .swiper-pagination-bullet {
         
      width: 16px;
      height: 16px;
      background: rgba(0,0,0,0.6);
    }
   
    .swiper-pagination .swiper-pagination-bullet-active {
         
      background: #fff;
    }
    .swiper-button-prev:after, .swiper-button-next:after {
         
      color: rgb(171, 149, 230);
    }
  }
  
  

总结

在vue3.0中使用swiper，整体下来的体验不太好，发现一个至今未解决的bug，项目打包后这个轮播图的小圆点和左右切换的按钮没有了。如果不是需要使用很多轮播图的话，更推荐自己写一个。