微信小程序 - swiper组件 - 13

swiper 轮播图组件的使用

如代码所示，微信小程序封装好了 swiper 组件，只需要按要求进行使用，外部包裹着 swiper 标签，内部根据需要轮播的图片数量，设置 swiper-item 的个数，当然可以使用 wx: for 遍历

  <swiper circular="{{true}}" indicator-dots="true">
    <swiper-item wx:for="{{swiperData}}" wx:key="index">
      <image src="{{item.image_url}}" mode="widthFix"></image>
    </swiper-item>
  </swiper>

更改 swiper 固定高度

官方设置的 swiper 固定高度150px ，所以会造成一个问题，图片会因为这固定的 150px 高度而部分裁剪

自适应高度：

将swiper 高度设为 rpx 单位，根据此图片在 iphone6 设备上的尺寸为基础，设置同等比例的 rpx ，方便适配其他尺寸设备

swiper {
  height: 314rpx;
}

swiper 轮播图属性配置

如有要求可按下图对 swiper 标签进行配置，例如轮播图的循环播放，自动播放，定时播放等功能，详细配置根据官方文档