Vueに基づいて実現する移動端ピクチャのマルチキャストコンポーネント.

wc-swiper
Vueの移動端に基づくピクチャマルチキャストコンポーネント.
why
以前はvue-awesome-swiperを使っていましたが、機能はそろっていますが、唯一の問題は体積が大きいことです.私はただ簡単な画像のマルチキャストがほしいだけですが、100以上のkサイズのファイルを導入するのは間違っています.
特長

自動再生&無限マルチキャスト(loop)効果

をサポート

ユーザー手動スライド

をサポートする.

圧縮後約~8 k

使用

npm i wc-swiper --save

//         (             ):
import wcSwiper from 'wc-swiper'
import 'wc-swiper/style.css'
Vue.use(wcSwiper);

//        view     :

    
        //            ,       
    


//     

   
   


//      slides    ,     wc-swiper      v-if   

   
   


//      

    
        //            ,       
    

コンフィギュレーション
wc-swiperでは、いくつかの構成オプションが表示されます.

duration:            | default: 500ms
interval:             | default: 2500ms
autoplay:           | default: true
therehold:                   | default: 110
curSlide:           slide | default: 0

≪イベント｜Events｜ldap≫

wc-swiperでいくつかのイベントをリスニングできます:

transitionend   
       (        ,       )      transitionend   . 
transtionend         :currentSlide,     ,    slide      slide.
     : slide   0     .

wc-slide上でclickイベントを傍受することができる.

方法
いくつかの場合、ボタンをクリックして、swiperを指定したslideにジャンプさせたり、ボタンをクリックしたりして、
swiperは前または次にジャンプする.これに対して、次のように操作できます.

1.          ref   ,   : 
2.    this.$refs.swiper          3    :

slideTo (index)         (index   0   )
next ()       
previous ()       

  :
this.$refs.swiper.slideTo(3) //        3   slide

問題の説明
1.輪転図の高さの設定方法
wc-swiperの高さを設定すればよい.例:

.swiper {
    height: 200px;
}

2.非同期データのレンダリング方法
一般に、マルチキャストのデータはインタフェースによって要求される場合があります.この場合、wc-swiperにv-if判断を加えてwc-swiperのレンダリングタイミングを遅らせる必要があります.

3.slideをクリックしたときに新しいページをジャンプする必要がある場合はどうすればいいですか
wc-slideの内容にaラベルを包むことができます

    
        //content
    

またはwc-slide上でclickイベントをリスニングできます.

4.paginationまたは左右の矢印をどのように追加しますか?
個人的には、paginationとarrow-left、arrow-rightは、swiperの関連施設にすぎず、構成の一部ではないと考えています.デフォルトのpaginationとarrowではなく、slotを提供しています.
swiperにpaginationまたはarrowを追加するには、次のように追加します.
この書き方を参考にしてください.
存在する問題

多指が触れる場合、例えば複数本の指が同時にスライドする場合、問題が発生し、このような極端な状況は、比較的複雑で珍しく、しばらく考慮しない.