vue中使用不同版本的Swiper

因为随着swiper的版本更新，各种版本出现的写法有所不同

swiper3

npm install swiper@3 --save-dev

因为版本的更新，swiper3逐渐使用的越来越少，但是还是有很多不必要的坑，

我们下载完之后只需要在全局main.js里面引入：

import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'

然后在我们需要的页面或组件引入

import Swiper from 'swiper'

引入之后我们就可以使用了，加上我们所需要的东西

dom结构

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
</div>

之后在我们的mounted生命周期里面

new Swiper(".swiper-container", {
      //自动轮播，这里直接写毫秒就可以了
      autoplay: 3000,

      //设置环路
      loop: true,

      // 如果需要分页器
      pagination: ".swiper-pagination",

      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",

      // 如果需要滚动条
      scrollbar: ".swiper-scrollbar",
});

样式

.swiper-container {
  height: 500px;
  width: 100%;
  .swiper-wrapper {
    .swiper-slide {
      width: 100%;
      height: 100%;
      background-color: #42b983;
      text-align: center;
      line-height: 500px;
    }
  }
}

完成这些swiper3的基本用法就全了

swiper5

这也是vue2目前用的最多的一个版本了，首先安装的时候我们需要执行这个命令同swiper一块安装的还有一个vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

这里和swiper3的引入思维基本上是一致的

早main.js里面引入

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

引入之后我们就可以直接写dom

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>

      <!-- 如果需要分液器 -->
      <div class="swiper-pagination" slot="pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>

      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar" slot="scrollbar"></div>
 </swiper>

然后data函数里面return一个

swiperOptions: {
        autoplay:true,
        //设置环路
        loop: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 如果需要滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
}

然后计算函数computed需要写一个方法

swiper() {
      return this.$refs.mySwiper.$swiper;
}

样式和swiper3一样

完成这些swiper5的基本用法就ok了

swiper7

一般我们使用swiper7都是用vue3来写的，尽量不要用swiper6（踩得坑比较多）我们创建好项目后，用

npm i swiper

这样下载下来的swiper就是swiper7版本的

首先在页面或者组建中引入

import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
import "swiper/modules/autoplay/autoplay.min.css";

这里的引入和官网上介绍的有点不一样可以根据自己的文件夹进行修改

然后在components将我们引入的Swiper, SwiperSlide写进来

 components:{
     Swiper,
     SwiperSlide
 }

setup里面写

setup() {
    //获取swiper对象
    const onSwiper = (swiper) => {
      console.log(swiper);
    };

    //轮播图改变触发的事件
    const onSlideChange = () => {
      console.log("slide change");
    };

    return {
      onSwiper,
      onSlideChange,

      //抛出各种样式
      modules: [Navigation, Pagination, Scrollbar, A11y,Autoplay],
    };
 };

在dom上是这样写的

    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      navigation
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      :autoplay="{Autoplay:true}"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>

我们绑定的属性都是在setup中抛出的

slides-per-view="1" 是只显示一屏

navigation  左右按钮

scrollbar 是滚动条

autoplay 是让它自动轮播

pagination 分页器

最后写一点样式就ok了

.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}

总结：虽然不同版本的swiper有些不同，但总的思路是不变的，官网也会有一些笼统的写法

swiper官网