【weex開發】vue-swipe 滑動組件的使用

一，vue-swipe簡介

vue-swipe 是餓了么團隊開發的vue專用的輪播圖插件；
可以實現簡單的圖片和view輪播，可控制動畫時長，可限制手動滑動；
簡而言之，可以實現輪播，也可以實現ppt樣式的帶動畫的報告。

二，vue-swipe的引入

1，安裝

$ npm install vue-swipe

2，引入依賴

import { Swipe, SwipeItem } from 'vue-swipe';

 components: {
        swipe: Swipe,
        swipeItem: SwipeItem
    }

 <style lang="scss" scoped>

    @import 'vue-swipe/dist/vue-swipe.css';

    ......

</style>

3,HTML使用

<swipe class="my-swipe" :auto="0" :continuous="false" :show-indicators="false" :disabled="true" :defaultIndex="0" ref="swipe" >
      <swipe-item class="slide1">1</swipe-item>
      <swipe-item class="slide2">2</swipe-item>
      <swipe-item class="slide3">3</swipe-item>
</swipe>

具體標簽屬性參考：https://github.com/ElemeFE/vue-swipe

參考文章：

https://github.com/ElemeFE/vue-swipe
https://segmentfault.com/a/1190000013909870
https://www.jianshu.com/p/c8788231ff2f