vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

vue-swiper

• 基于 Vue2.0 开发，基本知足大部分功能
• 轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播
• 没有引入第三方库，原生 js 封装,打包以后只有 8.2KB 大小 性能仍是杠杠滴

demo

? 以为好用给一个 star 哦~ ?

github传送门

Install

npm i vue-swiper-component --save
cnpm i vue-swiper-component --save  //国内镜像

Usage

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

components: {
    Swiper,
    Slide
}

//异步加载轮播图的状况
  <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

属性	说明	默认
autoPlay	是否自动轮播	true
showIndicator	是否显示轮播的那个点	true
interval	每两次隔多久滚动一次	2500
duration	每次滚动一页须要多久时间	500

✅  Swiper 上面还暴露了其余方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper>

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

事件

transtionend 事件  每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加
// @transtionend="getNum"    getNum(data) {console.log(data);}
click  事件 每一个轮播图上的事件

Other

• 能够经过覆盖个人样式进行自定义样式，Slide 标签里面能够写 div 或者其余的东西
• 一些参数配置能够参考上面 Usage 第三个示例，异步渲染要加 v-if 保证渲染成功 参考第一个示例
• 若是其余问题能够邮箱沟通，452216418@qq.com;
• 暂时对 PC 支持不是很友好，等之后有时间了能够加上;