vue2项目中使用swiper插件

vue2项目中使用swiper插件

在昨天码完上一篇文章后，突然想起来自己写vue项目时，用的轮播都是element-uI里的。并不是说element-uI里的不好用，但毕竟swiper人家是专业的。

安装步骤

1. 首先简单创建一个vue2项目，配置什么的我都是随便选的，具体使用时还是要以项目要求为准；

vue create test_demo

2. 然后就是通过node来安装swiper插件。这里需要注意的是，swiper默认的话，安装是最新版的swiper7。虽然说swiper7中新增了许多轮播效果，但日常开发中一般都是使用swiper3来进行（看个人爱好和项目要求），所以我们这里安装是需要带上版本号（swiper最后更新版本为3.4.2）：

npm install swiper@3.4.2 --save

​ 安装完成后可以在package.json文件中查看版本号（其他插件都是如此）

创建自定义组件

1. 在compents目录下为swiper单独创建一个文件夹，并根据需要添加相应文件：

2. 在对应的.vue文件中引入相应的js和css文件：

<script>
import swiper from "swiper";
</script>

<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";
</style>

3. 简单设置容器和轮播内容：

<template>
  <!--基础存放容器-->
  <div class="swiper-container">
    <!-- 需要进行轮播的部分 -->
    <div class="swiper-wrapper">
      <!-- 每个节点 -->
      <div class="swiper-slide">
        <img src="./image/banner (1).jpg" alt="图片1" />
      </div>
      <div class="swiper-slide">
        <img src="./image/banner (2).jpg" alt="图片2" />
      </div>
      <div class="swiper-slide">
        <img src="./image/banner (3).jpg" alt="图片3" />
      </div>
    </div>

    <!--如果需要使用分页器-->
    <div class="swiper-pagination swiper-pagination-white"></div>

    <!-- 如果需要使用前进后退按钮 -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</template>

4. 简单设置样式：

<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";
.swiper-container {
  width: 1000px;
  height: 450px;
  margin-top: 40px;
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
}
</style>

5. 创建swiper对象，设置相应属性，并在mounted钩子中调用方法（如果数据是动态获取的，还需要根据情况使用async和await），对应属性的使用可以参照官方文档。演示如下：

<script>
import swiper from "swiper";
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        //设置轮播的循环方式
        loop: true,

        //设置自动播放间隔时间
        autoplay: 2000,

        // 轮播效果,默认为平滑轮播
        effect: "slide",

        //分页器
        pagination: ".swiper-pagination",

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

        // 用户中断轮播后续播
        autoplayDisableOnInteraction: false,
      });
    },
  },
};
</script>

调用使用

在需要使用的文件中引用：

<template>
  <div class="home">
    <h1 align="center">Swiper插件</h1>
    <swiperVue />
  </div>
</template>

<script>
import swiperVue from "../components/Swiper/swiper";
export default {
  name: "Home",
  components:{
    swiperVue
  }
};
</script>

效果展示

实际上和在html中使用没有多大的区别，主要还是vue组件的知识。

这里是万物之恋，我们下次再见了！