微信小程序使用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 同上