微信小程序swiper組件實現圖片寬度自適應

wxml 代碼：

<!--pages/swipe/swipe.wxml-->
<view>
  <swiper circular="true"     indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" style="width: {{imageWidth}}px;" class="slide-image" model="aspectFit" />
      </swiper-item>
    </block>
  </swiper>

</view>

model="aspectFit"    mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。


Js代碼：

  data: {
    imageWidth: wx.getSystemInfoSync().windowWidth,//圖片寬度   
    indicatorDots:true,
    autoplay:true,
    interval: 2000,
    duration: 1000,
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
  },

wx.getSystemInfoSync().windowWidth   獲取屏幕的窗口寬度