微信小程序swiper轮播容器

微信小程序swiper轮播容器，swiper是微信小程序提供的一个轮播容器，一般用于图片轮播，而且微信小程序还提供了很多属性来自定义轮播容器的样式。swiper示例代码如下：

<!--index.wxml-->
<swiper indicator-dots indicator-color='rgba(255,255,255,1)' indicator-active-
color='rgba(100,100,100,1)' autoplay interval='3000' circular>
  <block wx:for="{{imgUrls}}">
  <swiper-item>
    <image src="{{item}}" width="355" height="150"/>
  </swiper-item>
</block>
  </swiper>
  // index.js
  Page({
data: {
  imgUrls: [
    'http:// img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
    'http:// img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
    'http:// img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  ]
},
  })

效果如图所示：

swiper属性如表所示：

注意

（1）circular指最后一张图片是衔接滑动到第一张图片，还是平移到第一张图片，建议使用true。
（2）当vertical为true时，面板指示点会跑到右侧。
（3）swiper以每一个swiper-item组件为单位，所以swiper一般与swiper-item配合使用。
（4）swiper-item内部不仅可以存放image组件也可以存放其他的组件。

酷客网相关文章：

• 微信小程序icon图标组件
• 微信小程序text文本组件
• 微信小程序image组件
• 微信小程序scroll-view滚动视图