vue-swiper-component ----------------------一个vue的移动端滑动轮播插件

安装

npm i vue-swiper-component --save

引用代码部分

import { Swiper, Slide } from 'vue-swiper-component';

components: {
    Swiper,
    Slide
}

template部分
三种配置

//异步加载轮播图的情况
  <Swiper v-if="list.length > 0">
       <Slide v-for="(item,index) in list" :key="index">
       </Slide>
  </Swiper>


 //同步加载轮播图情况
  <Swiper>
       <Slide>
               1
       </Slide>
       <Slide>
            2
       </Slide>
       <Slide>
            3
       </Slide>
  </Swiper>

    //加一些参数配置情况
  <Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
        <Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
            //添加click事件
        </Slide>
   </Swiper>

API

增加事件

transtionend 事件 每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加

@transtionend="getNum"   

getNum(data) {
    console.log(data);//输出轮播到第几张图片
}

Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如:

<Swiper ref="swiper"></Swiper>

 this.$refs.swiper.prevSlide(); // 上一张图
 this.$refs.swiper.nextSlide(); // 下一张图
 this.$refs.swiper.slideTo(2); //某一张图

---

结束~~