Vue中使用vue-awesome-swiper实现移动端的轮播

swiper,一款不错的轮播插件，支持移动端   官网api网址： http://www.swiper.com.cn/api/index.html

在vue中使用swiper, 有专门的一个npm包： vue-awesome-swiper

使用步骤：

1.安装vue版swiper

cnpm i -S vue-awesome-swiper

 

2. 在.vue组件中引入swiper , swiperSlide  和 css样式

import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' //注意这里  

3.编写布局和样式

<div class="swiper-box">
        <swiper class="box-container" :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, index) in imgLists" :key="index" @touchmove.native="stopPlay" @touchend.native="play">  // 自定义组件要加上.native
                <img class="swiper-image" :src="item.url" alt="">
            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
        </swiper>
    </div>

.swiper-image{
   100%;
  height: 270px;
}

4.在data里配置imgLists图片地址和配置swiperOption参数

imgLists: [
        {
          url: "/src/static/img1.jpg"
        },
        {
          url: "/src/static/img2.jpg"
        },
        {
          url: "/src/static/img3.jpg"
        },
        {
          url: "/src/static/img4.jpg"
        }
      ],
      swiperOption: {
        notNextTick: true,
        autoplay: {    // 自动播放
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        loop: true,   // 循环
        directionType: "horizontal", // 方向
        pagination: {               // 分页器
          el: '.swiper-pagination',
          type: "bullets",
          clickable :true
        },
        navigation: {   // 左右按钮
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer:true,  // 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
        observeParents: true,  // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
        setWrapperSize :true  // Swiper使用flexbox布局(display: flex)，
        // 开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
      }

5. 在computed中

computed: {
    mySwiper() {
      return this.$refs.mySwiper.swiper;
    }
  },

6.在methods中，

    stopPlay() {
      this.mySwiper.autoplay.stop();    // 当手指触摸时停止自动播放
3     },
    play() {
      this.mySwiper.autoplay.start();   // 当手指离开时开始自动播放
    }