Vue中 用vue-awesome-swiper开发轮播图

https://github.com/surmon-china/vue-awesome-swiper

安装 用  

npm install [email protected] --save //比较稳定

效果图：

<template>
  <!--加这个 div用来解决 3g网下 图片显示慢时 先出现文字 占据图片位置的情况-->
  <div class="swiper">
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <swiper-slide v-for="item of swiperList"  :key="item.id">
      <img  class="swiper-img" src= "item.imgUrl"  height="300"
                              width="534"/>
    </swiper-slide>

    <div class="swiper-pagination"  slot="pagination"></div>
       <!--图片上那三个小点是个组件在 slot="pagination" 里   这个组件会把值传给 <Div>class=swiper 这个组件 在让他显示 因为这个swiper里面没有-->
    <!-- 出现 .swiper-pagination-bullet-active这个类名所以 <Div>class=swiper 不会显示他的样式 因为有 scoped 所以要穿透 -->
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'HmoeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true // 让图片左滑还是右滑一直循环
      },
      swiperList: [{
        id: '0001',
        imgUrl: '[email protected]/assets/styles/imgs/u=1754831672,534515590&fm=26&gp=0.jpg'
      }, {
        id: '0002',
        imgUrl: '../../../assets/styles/imgs/u=1810549082,3210007081&fm=26&gp=0.jpg'
      }]
    }
  }

}
</script>
<style lang="stylus" scoped>
  //    <!--图片上那三个小点是个组件在 slot="pagination" 里 如果在 .swiper下在 分一级
  //写样式将不会显示 因为定义了 scoped 所以 样式只会在 swiper组件里显示
  //  <!--图片上那三个小点是个组件在 slot="pagination" 里   这个组件会把值传给 <Div>class=swiper 这个组件 在让他显示 因为这个swiper里面没有-->
 // <!-- 出现 .swiper-pagination-bullet-active这个类名所以 <Div>class=swiper 不会显示他的样式 因为有 scoped 所以要穿透 -->

    .wrapper >>>.swiper-pagination-bullet-active //轮播图中的那个显示页数的小圆点
       background : #fff
   .swiper //  加这个 div用来解决 3g网下 图片显示慢时 先出现文字 占据图片位置的情况
     overflow:hidden //overflow 属性规定当内容溢出元素框时发生的事情。
     width: 100%
     height:0
     padding-bottom :50% //长：款的比例
     background :#eee //使图片没显示的时候 图片存在的区域显示为 灰色
     .swiper-img
         width:100%   //设置图片尺寸正好占据整个轮播图

</style>