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

轮播图组件swiper

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

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

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

轮播图显示效果

结构

  
    
        
    
  



 indicator-dots 
 autoplay 
 interval
 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标签官方文档