# 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' ] ``` ``` <!-- indicator-dots是否显示指示点 indicator-color指示点的颜色 indicator-active-color当前选中指示点的颜色--> <!-- autoplay是否自动轮播 i nterval自动切换的时长。默认为5秒 circular 是否无缝连接 vertical是否为纵向轮播，默认为false--> <swiper indicator-dots indicator-color="#fff" indicator-active-color="yellow" autoplay interval="3000" circular > <swiper-item wx:for = "{{banners}}" wx:key = "index"> <image src = "{{item}}"></image> </swiper-item> </swiper> ```