# swiper组件

swiper是一个**滑块视图容器**。即: **轮播图**组件或者**焦点图**组件。swiper这个组件封装的已经比较完善,使用起来非常方便。

*****

| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |

| --- | --- | --- | --- | --- |

| indicator-dots | Boolean | false | 是否显示面板指示点 | |

| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |

| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |

| autoplay | Boolean | false | 是否自动切换 | |

| current | Number | 0 | 当前所在页面的 index | |

| interval | Number | 5000 | 自动切换每一页时间的间隔 | |

| duration | Number | 500 | 滑动一页时的动画时长 | |

| circular | Boolean | false | 是否采用衔接滑动( loop ) | |

| vertical | Boolean | false | 滑动方向是否为纵向 | |

| bindchange | EventHandle | | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |

*****

### swiper组件的使用

> **注意**:swiper只中可放置swiper-item组件,否则会导致未定义的行为。swiper-item的宽度自定设计为100%。

*****

```

banners:[

'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',

'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',

'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'

]

```

```

```

swiper默认选中,swiper组件相关推荐

  1. swiper默认选中_Swiper

    Usage: 1.下载swiper最新版本https://github.com/nolimits4web/Swiper 2.在HTML Head中添加Swiper's CSS and JS: 1 2 ...

  2. vue el-radio 单选传值和默认选中

    父组件点击"关联公司"输入框(如下图)弹出子组件dialog 子组件效果下图默认选中 父组件代码 点击输入框 <el-form-item v-if="flag&qu ...

  3. 微信小程序---swiper轮播图组件

    微信小程序-swiper轮播图组件 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...

  4. Vant Weapp组件picker选择器初始默认选中

    小程序使用vant-picker多列数据级联选择设置初始默认选中通过this.xx修改对应列defaultIndex的不生效,数据改变页面未渲染 解决:在onReady()方法中通过selectCom ...

  5. antd Card组件默认选中

    antd Card组件,按照文档,设置了默认值,热更新后,效果正常,完美. 开发过程中,为了防止浏览器有缓存,经常性地会手动点击浏览器的刷新按钮.就是这么一点,让我在设置默认选中上,多停留了几分钟. ...

  6. 自定义基于elementui的仿QQ邀请成员进群树图模糊搜索组件可实现默认选中部分选项,删除选项,搜索展示子节点

    需求:项目经理要求实现一个类似QQ成员系统管理的组件来进行成员系统权限的添加,可多选可查询,本来想用elementui树图组件,但是elementui树图搜索父节点却没展示子节点,于是在之前改过ele ...

  7. Vue实现Element UI的下拉框默认选中,值来自父组件或异步获取

    子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...

  8. 解决swiper默认显示最后一张问题

    swiper默认显示最后一张? 在使用swiper轮播图的时候,用ajax动态加载swiper-slide,每次刷新默认会显示到最后一张,设置参数如下 $(document).ready(functi ...

  9. Angular中的路由配置、路由重定向、默认选中路由

    场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

最新文章

  1. SpaceX再送4人上太空,马斯克保证这次飞船厕所不会漏了
  2. 贝壳集团IPO背后,风投协议之外还要面临何时盈利的问题
  3. ppt提示内存或系统资源不足_为何手机一直提示内存不足?原来是它们惹的祸,赶紧清了...
  4. ZooKeeper之(四)配置与命令
  5. antdesign 柱状图_以Ant Design为例:看B端设计的基本套路
  6. Python 语言 Hello world
  7. 三十正青春!苏宁818要用“好服务”抢占年轻用户心智
  8. 内外网切换,内网固定ip
  9. 失败的过去式英文翻译_过去式用英语怎么说
  10. ubuntu开机后nvidia驱动突然消失,nvidia显卡驱动卸载与安装
  11. ESP8266 驱动1.3寸SH1106 OLED屏幕显示库
  12. batchsize、iteration、epoch之间的关系
  13. 目标检测---以制作yolov5的数据集为例,利用labelimg制作自己的深度学习目标检测数据集(正确方法)
  14. Windows窗体应用程序~随机数字抽奖系统
  15. 夏普linux电视安装apk,海信电视u盘安装apk的两种方法,内附图文步骤
  16. 从普通 Msconfig 启动选择转为选择性启动
  17. 【C语言—零基础第九课】函数中的爱恨情仇
  18. 喜马拉雅追更攻略:如何订阅更新通知
  19. 大白话理解:BRDF,皮肤渲染
  20. 论文解读:DETR 《End-to-end object detection with transformers》,ECCV 2020

热门文章

  1. DMO播放器经验总结
  2. IDEA如何配置 Maven 及 Maven 安装过程(详细版)
  3. Android网络编程 HttpUrlConnection HttpClient AsyncTask
  4. 浮点数保留小数点后两位(JS)
  5. android最新版本 note8,荣耀Note8有几个版本 荣耀Note8各版本区别对比
  6. XCODE 开发者申请缴费需要知道事项问题
  7. 链表带环问题(LeetCode 142)
  8. 23 届校招技术岗薪资汇总
  9. JAVA 注解 processor_注解处理器(Annotation Processor)简析
  10. 「CTA行为召唤按钮」设计规则解析