码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-27 19:11:31      阅读:360      评论:0      收藏:0      [点我收藏+]

标签:component   tps   npm   图片   install   css   vue   disabled   文章   

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

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

标签:component   tps   npm   图片   install   css   vue   disabled   文章   

原文地址:https://www.cnblogs.com/neo-java/p/10327265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!