一,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 滑动组件的使用的更多相关文章

  1. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  2. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  3. 一个 Vue 的滑动按钮组件

    git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...

  4. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  5. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  6. vue.js开发之开关(switch)组件

    最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role=&quo ...

  7. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  8. weex和vue开发环境配置详解(配置系统变量等等)

    本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...

  9. vue04 组件化开发 Vue自动化工具

    5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网 ...

随机推荐

  1. 基于消息队列(RabbitMQ)实现延迟任务

    一.序言 延迟任务应用广泛,延迟任务典型应用场景有订单超时自动取消:支付回调重试.其中订单超时取消具有幂等性属性,无需考虑重复消费问题:支付回调重试需要考虑重复消费问题. 延迟任务具有如下特点:在未来 ...

  2. 学习c语言时对一些疑问的测试

    #include<stdio.h>#include<string.h> int main(){/* 1 */// int a[3][3]={6,1,2,3,4,5};// in ...

  3. php ajax 修改,删除,添加(学做)

  4. 图解|用好MySQL索引,你需要知道的一些事情

    我是蝉沐风. 这一篇文章来聊一聊如何用好MySQL索引. 为了更好地进行解释,我创建了一个存储引擎为InnoDB的表user_innodb,并批量初始化了500W+条数据.包含主键id.姓名字段(na ...

  5. LGP3708题解

    题面很直白,就不说了罢qaq 首先很明显,\(\sum_{i=1}^n x \bmod i = nx - \sum_{i=1}^n i\lfloor \frac x i \rfloor\) 这道题要是 ...

  6. 使用flask进行mock接口

    在测试日常过程中,我们经常会遇到因为环境问题,或者是因为上下游,前后端开发进度不一,提测时间不一等情况.这时候我们可以通过mock的方式去完成一些操作.今天给大家分享一个通过flask去mock接口, ...

  7. mysql 索引模板

    DROP TABLE IF EXISTS `table_name`; CREATE TABLE `table_name` ( `id` bigint(20) UNSIGNED NOT NULL AUT ...

  8. 基于Python实现二分查找法实战

    二分查找法实战 def binary_search(datasets, find_in): mid = int(len(datasets)/2) if(mid>0): if(find_in> ...

  9. Mysqldump 命令只导出表结构或数据或数据和结构的方法

    1.备份数据库 #mysqldump --opt -d 数据库名 -u root -p > xxx.sql #mysqldump DB_NAME >数据库备份名 #mysqldump -A ...

  10. 4月3日 python学习总结

    1. 列表生成器 l=['egg%s' %i for i in range(100) if i>20 ] print(l) 若将 [ ] 换成 ( ),则为生成器表达式,结果是一个迭代器 #求文 ...