在Vue脚手架中三分钟快速上手Swiper(轮播图)插件

快速上手Swiper插件

1. 先下载插件

npm install vue-awesome-swiper --save

2. 引入插件

• 全局引用 所有的组件都能使用

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

• 单个组件中使用

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

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

• 轮播图一般只一次，我个人还是觉得只是使用一次，就直接用在组件中引用，减少main.js文件中的代码量

3. 在template中使用

• HTML代码

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide>
        <img src="http://p1.music.126.net/UZ4yDRZThaXTeo8QjRLg9Q==/109951164780032284.jpg?imageView&quality=89"/>
      </swiper-slide>
      <swiper-slide>
        <img src="http://p1.music.126.net/PaTN2pnO-ALBOisFFGSIsw==/109951164780978350.jpg?imageView&quality=89"/>
      </swiper-slide>
      <swiper-slide>
        <img src="http://p1.music.126.net/j8NQLZ2P4Zn1tr30c7dSTw==/109951164780079361.jpg?imageView&quality=89"/>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

• js代码 放在data里

data() {
    return {
      swiperOption: {
        //循环模式开启
        loop: true,
        //自动切换
        autoplay: {
          //每隔2000毫秒切换一次
          delay: 2000,
          //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
          //如果设置为true 如拖动、点击、触碰后，自动切换将会停止
          disableOnInteraction: false
        },
        navigation: {
          //使用前进后退按钮来控制Swiper切换
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  }