微信小程序学习-轮播图组件swiper

轮播图组件swiper

微信小程序提供了滑块视图容器swiper，可以便捷实现轮播图效果。

这个名字和移动端常用的触摸滑动插件Swiper看起来很相似。小程序这个组件实现简单效果会便捷一些，但是要更复杂炫酷的效果还是Swiper插件多一些，可自定义的空间大。

微信小程序轮播图组件官方文档提供了组件使用的示例代码，显示效果：

轮播图显示效果

结构

<!--swiper.wxml-->
<!--swiper组件 begin-->
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
        <image src="{{item}}" class="slide-image" mode="scaleToFill"/>
    </swiper-item>
  </block>
</swiper>
<!--swiper组件 end-->
<!--测试swiper组件的属性配置-->
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

js

//swiper.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'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 1500,
    duration: 1000
  },
  <!--事件函数，测试组件属性设置效果-->
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

• 在js的data中设置需要轮播显示的图片数组。在结构中用wx:for循环输出image标签
• 通过js的data可直接设置自动播放（autoplay）、指示小圆点（indicatorDots），自动切换时间间隔（interval）和滑动动画时长（duration）。还有其他属性如指点颜色和滑动方向等，在官网文档中都有详细说明。

注意小坑：官网示例代码没有提供样式设定，image图片默认大小是320*240，显示出来图片宽度没有占满，底部还被遮住了部分。

不设置图片宽高效果

• 图片的宽高要在样式中控制，在图片标签中设置宽高无效。
• 图片缩放裁剪可以在image标签的mode属性控制，缩放裁剪有多种不同效果，详见微信小程序image标签官方文档

样式

/*swiper.wxss*/
image{
    width:375px;
    height:150px;
}

参考资料：

微信小程序轮播图组件官方文档

微信小程序image标签官方文档