Swiper布局以及Swiper组件引入 并且解决Swiper掉块问题

安装Swiper

cnpm install vue-awesome-swiper --save

引入Swiper

import App from './App'
// 样式引用 Swiper
import 'vue-active-swiper/dist/VueActiveSwiper.css'

import VueActiveSwiper from 'vue-active-swiper'

Vue.use(VueActiveSwiper)

使用Swiper

<template>
  <div class="header-swiper">
      <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide v-for='item in swiperList' :key='item.id'>
            <img :src="item.imgUrl"/>
          </swiper-slide>
          <!-- 分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script type="text/javascript">
export default {
  data(){
    return {
      swiperList:[
        {
          id:'01',
          imgUrl:require("@/assets/img/img1.jpg")
        },
        {
          id:'02',
          imgUrl:require("@/assets/img/img2.jpg")
        },
        {
          id:'03',
          imgUrl:require("@/assets/img/img3.jpg")
        }
      ],
      swiperOption:{
        //  设置分页器
          pagination: {
            el: '.swiper-pagination',
          },
          // 循环
          loop: true
        }
      }
  }
}

注意：:options=“swiperOption” swiperOption 前后要一致 小编就是因为这个错误找了好久

此时该Swiper有的问题

1. 背景没有填充色
2. 掉块问题

解决方法：

.header-swiper{
  background:#ccc;
  height: 0;
  padding-bottom: 26.67%
}

26.67%是根据宽度来得出的
100%表示宽高相等
50%表示高是宽的一半
因为之前设置的高度为2rem 且 350*26.67正好差不多一百 所以使用 padding-bottom: 26.67%