Swiper组件的使用

第一步：Vue通过npm安装Swiper组件：

npm install swiper@4.4.4

这里安装的是4版本。

第二步：在Vue组件中使用Swiper插件

1. 首先导入swiper的JS文件

import swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

第三步：打开Swiper官网：

Swiper使用方法 - Swiper中文网https://www.swiper.com.cn/usage/index.html

第四步：将官网中的格式直接粘贴过来：

 在Vue中的template中

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in banner" :key="item.id">
        <img :src="item.src" alt="">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

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

第五步：引入JS方法：

在mounted钩子函数中初始化swiper组件：

 mounted() {
    new swiper(".swiper-container", {
      loop: true, // 循环模式选项

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

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      }
    });
  },

注意：

这里需要注意，如果是动态获取数据，则需要将mounted改成updated钩子函数。因为请求数据实在created，mounted在created之前。

第六步：将数据写在data()函数中

 data() {
    return {
        banner:[
        {
          id: 0,
          src: require("@/assets/swiper.png"),
        },
        {
          id: 1,
          src: require("@/assets/swiper.png"),
        },
        {
          id: 2,
          src: require("@/assets/swiper.png"),
        },
        ]
    };
  },

效果图：