vue轮播图

借助第三方轮播插件 npm install vue-awesome-swiper --save
打开github，里面搜索vue-awesome-swiper
找相对应的文件
执行里面相关的命令

npm install vue-awesome-swiper --save

在main.js中引入

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

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

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

在swiper组件中的template模板中copy，删掉不用的功能

<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>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</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>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
        }
      }

出现问题：在轮播图后面出现的文本在网络比较慢的时候加载会出现，图片还没出来时候，在顶处，图片出来后在图片的下方，会出现抖动的bug，用户体验不好
处理：在swiper的外边再套上一层标签，例如套上一个类名为wrapper的div，
此时给wrapper设置样式为：

//宽度相对于高度是保持31.25的比例
.wrapper {
	width: 100%;
	overflow: hidden;
	height: 0;
	padding-bottom: 31.25%;
}
// 或者
.wrapper {
	width: 100%;
	height: 31.25vw;
	//(viewport,兼容性不好)
}

问题：添加的小圆点会为默认的颜色，如何修改其颜色，由于小圆点是其内部设定的颜色，所以必须要用样式穿透
参考：关于轮播图插件样式失控或样式穿透写法

/deep/ 是sass和less的样式穿透
.wrapper /deep/ .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color:#000;
    opacity: 1;
    background: rgba(0,0,0,0.2);
  }
.wrapper /deep/ .swiper-pagination-bullet-active {
    color:#fff;
    background: #ff51d6;
  }

问题：如何左右都可手动循环播放

data() {
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					loop: true//支持左右循环播放
				},

问题：通过父组件向子组件传递的数据，循环渲染，刷新页面每次出来的是最后一张图片
解决：在 中添加v-if，意思是当列表数据显示完了，再出现轮播图

<swiper :options="swiperOption" v-if="swiperList.length">