nuxt.js项目使用swiper轮播插件具体步骤

一. 版本环境

项目是通过npx create-nuxt-app@2.9.2 projectName创建的

"nuxt": "^2.0.0",
"swiper": "^4.5.1",
"vue-awesome-swiper": "^4.1.1"

二. 代码部分

2.1 安装插件

npm install swiper@4.5.1 --save
npm install vue-awesome-swiper@4.1.1 --save

2.2 plugins文件夹创建swiper.js文件，内容如下

import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
  Vue.use(VueAwesomeSwiper, {css})
}

CSS样式文件的导入需要特别说一下，官网提示导入如下：

所以当前版本下（“swiper”: “^4.5.1”）我该这样导入import css from ‘swiper/css/swiper.css’，但是报错了，如下：

正确写法如下：

import css from 'swiper/dist/css/swiper.css'

2.3 在nuxt.config.js中配置插件

plugins: [
  { src: "~/plugins/swiper.js", ssr: false },
],

2.4 在components文件夹里面创建swiper.vue组件

<template>
  <div class="swiper-page">
    <div v-swiper:mySwiper="swiperOption" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, idx) in swiperData" :key="idx">
          <img :src="item.imgUrl" />
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-style"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperData: [
        { imgUrl: require('../../static/images/index/banner@2x.png') },
        { imgUrl: require('../../static/images/index/bg@2x.png') },
        { imgUrl: require('../../static/images/index/bg1.png') },
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
          bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
          clickable: true, // 点击当前滑块切换到对应的轮播图片
        },
        autoplay: {
          delay: 2000,
        },
        paginationClickable: true,
        speed: 800,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.swiper-page {
  position: relative;
  .swiper-slide {
    width: 760px;
    height: 440px;
    // box-shadow: 0 0 30px 3px rgba(77, 97, 140, 0.4);
    img {
      width: 760px;
      height: 440px;
    }
  }
  .swiper-pagination-style {
    position: absolute;
    left: 60px;
    bottom: 39px;
    width: 300px;
    @include flexlayout(row, flex-start, center);
    .my-bullet-swiper {
      display: inline-block;
      width: 46px;
      height: 6px;
      background: #9b9bb6;
      margin-right: 14px;
    }
    .my-bullet-active-swiper {
      background: #ffd18e;
    }
  }
}
</style>

2.5 在某个页面引入使用swiper组件

<template>
  <div class="content-swiper">
     <swiper-page></swiper-page>
  </div>
</template>

<script>
import swiperPage from '~/components/swiper.vue'

export default {
  name: "contentSwiper",
  components: {
    swiperPage,
  },
}
</script>

注意：此时会遇到一个问题，你会发现自定义滑块的样式不起作用

// 这个部分没效果
<div class="swiper-pagination swiper-pagination-style"></div>

原因： swiper分页是在mouted周期里操作DOM创建的，vue是不会帮你在创建的分页上加上scoped自定义属性的

方法：1. style标签去掉scoped。 2.在下面再写一个style标签且不带scoped属性

修改后成功使用，如下图：

注意：使用时一定要注意安装插件的版本，如果使用不起，很有可能是版本不匹配。

（完）