微信小程序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   获取屏幕的窗口宽度

 

越努力越幸运