nuxt中使用轮播图组件vue-awesome-swiper

官方推荐在ssr中使用的是directive模式
vue-awesome-swiper具有一个内置directive的客户端渲染Swiper。directive最大的好处是HTML仍可以在服务器端渲染网页并输出，以便搜索引擎可以正确捕获目标内容。

directive模式

<div v-swiper="swiperOption"> 
  <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      在服务器中呈现原始HTML，在浏览器（客户端）中呈现Swiper 
    </ div> 
  </ div> 
</ div>

有了这个案例，我们可以在官网获取不同的样式，然后改造成directive模式

1. 在vue中正常使用

具体配置这个教程很多，步骤就不一一写明了

<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: 'swiper-example-pagination',
    title: 'Pagination',
    components: {
      Swiper,
      SwiperSlide
    },
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import './base.scss';
</style>

实现的效果如下

2. 在Nuxt中使用

2-1. 安装

npm install -S swiper vue-awesome-swiper

2-2. plugins文件夹新建vue-swiper.js文件

import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";

Vue.use(VueAwesomeSwiper);

2-3. 在nuxt.config.js中配置

  /*
   ** Global CSS
   */
  css: ["element-ui/lib/theme-chalk/index.css", "swiper/css/swiper.css"],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    { src: "@/plugins/element-ui", ssr: true },
    { src: "@/plugins/vue-swiper.js", ssr: false }
  ],

2-4. 使用directive模式

<template>
  <div v-swiper="swiperOption">
    <div class="swiper-wrapper">
      <div v-for="(item, index) in dataImage" :key="index" class="swiper-slide">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <div slot="pagination" class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataImage: [
        {
          imgUrl: require("../../assets/images/bgtop.jpg")
        },
        {
          imgUrl: require("../../assets/images/bgtop2.jpg")
        },
         {
          imgUrl: require("../../assets/images/bgtop3.jpg")
        }
      ],
      swiperOption: { // 配置说明直接看官网
        lazy: {
          loadPrevNext: true
        },
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  beforeMount() {},
  methods: {}
};
</script>

实现效果如下

2-5. 实现鼠标移出移入的特殊效果

首先我们设置图片自动播放，我们想要的效果是鼠标移入停止自动播放，移出则继续自动播放

改动如下

<template>
// 改动一
  <div
    v-swiper:swiper="swiperOption"
    @mouseenter="stopSwiper"
    @mouseleave="startSwiper"
  >
    <div class="swiper-wrapper">
      <div v-for="(item, index) in dataImage" :key="index" class="swiper-slide">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <div slot="pagination" class="swiper-pagination"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataImage: [
        {
          imgUrl: require("../../assets/images/bgtop.jpg")
        },
        {
          imgUrl: require("../../assets/images/bgtop2.jpg")
        }
      ],
      swiperOption: {
      // 改动二
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },
        lazy: {
          loadPrevNext: true
        },
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  beforeMount() {},
  // 改动三
  swiper() {
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    return this.$refs.swiperBox.swiper;
  },
  methods: { // 改动四
    stopSwiper() { // 鼠标移入停止播放
      this.swiper.autoplay.stop();
    },
    startSwiper() { // 移出继续播放
      this.swiper.autoplay.start();
    }
  }
};
</script>

实现效果如下

参考资料:

vue-awesome-swiper
vue-awesome-swiper案例
nuxt.js安装vue-awesome-swiper