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 标签进行配置,例如轮播图的循环播放,自动播放,定时播放等功能,详细配置根据官方文档