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 支持不是很友好，等之後有時間了能夠加上;