weex开发vue-swipe 滑动组件的使用

Posted 2021-02-06 neo-java

一，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