Nuxt.js使用swiper以及swiper基本用法

前言

最近重构的电商导购项目，一个分站主页需要用到轮播图。
第一时间想到的就是Swiper，虽然听说过这个大名鼎鼎的轮播图插件。
但可惜的是没有在项目中用到过，刚好这次机会可以让自己研究研究Swiper。

安装

由于本项目是重构用的是 Nuxtjs 2版本的框架，会和vue脚手架稍许不同。此次选择Swiper的版本为5

    npm install vue-awesome-swiper
    npm install swiper@5.4

插件注册

在项目src目录下的plugins文件夹，新建一个swiper.js文件，写如下内容。

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

配置

在nuxt.config.js文件中对swiper进行配置

  plugins: [
    {
      src: '@/plugins/swiper.js',
      ssr: false //该文件只会在客户端被打包引入
    }
  ],

使用

<div v-swiper:mySwiper="swiperOption" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in list" :key="index">
          <div class="m_logo">{{ item.logo }}</div>
          <p class="m_title">{{ item.title }}</p>
          <p class="m_tit">{{ item.tit }}</p>
          <div class="m_date">Expires:{{ item.date }}</div>
          <a class="m_href" href="#script:;">Get Code ></a>
        </div>
    </div>
  <div class="swiper-pagination my-pagination"></div>
</div>

data() {
return {
  swiperOption: {
    // loop: true, //循环
    slidesPerView: 5, //slide容器能够同时显示的slides数量
    slidesPerGroup: 5, //多少个slide为一组
    spaceBetween: 20, //sliders之间的距离
    //分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      bulletClass: "swiper-pagination-bullet",
      bulletActiveClass: "my-pagination-active",
    },
  },
  list: [
    {
      logo: "Webject",
      title: "Webject",
      tit: "Webjet:10% off Discount",
      date: "25 Feb,2022",
    },
    {
      logo: "cottontraders",
      title: "cottontraders",
      tit: "Up To 50% Off Outdoor Savings at Cotton Traders",
      date: "Soon",
    },
    {
      logo: "Lowes Australia",
      title: "Lowes Australia",
      tit: "10% Off Your Order",
      date: "23 Jan, 2022",
    },
  ],
};
},

其他细节

1. 分页器放置在容器外面，只需要设置容器的下内边距即可。

.swiper-wrapper {
    padding-bottom: 50px;
}

2. 修改分页器默认样式

pagination: {
  el: ".swiper-pagination",
  clickable: true,
  bulletClass: "swiper-pagination-bullet", //修改默认样式必须的配置
  bulletActiveClass: "my-pagination-active",//修改选中样式
},

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background-color: #f0a7a9;
  opacity: 0.5;
}
.my-pagination-active {
  background-color: #ee6762;
  opacity: 1;
}

总结

swiper使用起来不算难，难的是不同项目需要不同的swiper版本。本人也曾入过坑，自此也算是告一段落了。