swiper组件

.wxml

 <view class="lunbotu">
    <swiper indicator-dots autoplay="autoplay" circular="true" interval="1000" duration="500" style='height:{{Height}}'>
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image"  mode="widthFix"  bindload='imgHeight'/>
        </swiper-item>
      </block>
    </swiper>
  </view>
  

.js

page({
	data: {
	    imgUrls: [
	      '../../img/1.jpg',
	      '../../img/2.jpg',
	      '../../img/3.jpg'
	    ],
	    indicatorDots: false,
	    autoplay: false,
	    interval: 5000,
	    duration: 1000,
	    Height: ""
	    
	  },
	  imgHeight: function (e) {
	    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
	    var imgh = e.detail.height;//图片高度
	    var imgw = e.detail.width;//图片宽度
	    var swiperH = winWid * imgh / imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
	    this.setData({
	      Height: swiperH//设置高度
	    })
	  },
})

.ss

.slide-image{
  width: 100%;
}