vue-awesome-swiper插件书写移动端基本的轮播图

安装：利用vue-cli这个工具创建一个vue项目，然后在项目中安装这个插件，详细方式可见官网，我用的是npm安装

npm install vue-awesome-swiper --save

引入这个插件：一般情况下可能多个页面要使用到轮播图，就全局引入这个插件，当然如果只需要局部用这个插件可以局部引用。我使用的是全局引用。

在main.js文件中添加下面三句（即引入了这个轮播插件）：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

然后就可以利用这个插件写轮播组件了，下面是一个整的样子，自己可根据需求进行适当的删减

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</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>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

我的轮播图没有左右键也没有滚动条只有简单的分页点，所以代码如下：

<swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>
        <img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1807/a1/41a802abfc4f0202.jpg_750x200_9f0cf69c.jpg" alt="去哪儿门票" style="opacity: 1;">
    </swiper-slide>
    <swiper-slide>
        <img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1807/78/0f57f90bedbc4102.jpg_750x200_f0d1ad2c.jpg" alt="去哪儿门票" style="opacity: 1;">
    </swiper-slide>
    <swiper-slide>
        <img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1806/ee/b889bce65d6dcf02.jpg_750x200_b1cb6a9f.jpg" alt="去哪儿门票" style="opacity: 1;">
    </swiper-slide>
     <swiper-slide>
	<img class="swipe-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg" alt="去哪儿门票" style="opacity: 1;">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
 </swiper>

为了能让他自动轮播还有循环轮播需要对配置项进行一定的配置，代码如下：

<script>
    export default{
	name:"MySwiper",
	data () {
	    return {
		swiperOption:{
			pagination:{el:".swiper-pagination"},
			//loop:true使轮播图可以循环轮播
			loop:true,
			autoplay:true,
			//speed是一张图划过的时间长度
			speed:100
		}
	    }
        }
    }
</script>

因为版本问题，这里有一个很容易犯错的地方，为了能让小圆点出现，要使用pagination:{el:".swiper-pagination"}而不是pagination:".swiper-pagination",用这个是无效的，而且注意这是一个类名有点。

好了，至此，一个简单的移动端轮播图就实现了，效果如下：

该轮播图可以自动轮播，也可以手动滑动。更多详细设计可以见官网。