微信小程序使用swiper制作轮播图留白的解决方法

微信小程序相比网页制作轮播图快捷了很多，直接可以使用swiper标签，但是对于新手来说，也有很多不可避免的坑。

附上轮播图代码

<view class="swp">
  <swiper style="height:220px;" indicator-dots="true" indicator-active-color="red" indicator-color="white" autoplay="true" interval="3000" interval="3000" circular="true">
    <swiper-item>
      <image src="/images/sw1.png" bindtap="gzh"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/sw2.png" bindtap="comi"></image>
    </swiper-item>
  </swiper>
</view>

你可能会发现右边的一大片空白

也有可能机型选择在电脑上看不到空白，但是在手机预览时看到了

与其这样得过且过，不如一次搞定

道理其实很简单，swiper下的图片被强制设定了宽度。所以只需要在swiper外围的view定位到image属性进行设置即可

在前面的基础上，在wxss下编写以下代码

.swp image{
width: 100%;
}

预览，就是下图这个样子了

 

swiper属性设置

属性名	类型	默认值	说明
indicator-dots	Boolean	FALSE	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	FALSE	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	FALSE	是否采用衔接滑动
vertical	Boolean	FALSE	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	Number	1	同时显示的滑块数量
skip-hidden-item-layout	Boolean	FALSE	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上