轮播图自适应高度

src/component/imageSwiper/imageSwiper.js

@@ -30,12 +30,52 @@ Component({
     interval: 5000,
     duration: 1000,
     isAuthorization: false, // false 不显示 true 显示
-    baseImgUrl: ''
-  },
+		baseImgUrl: '',
+		maxHeight: 0,
+		padding: 0,
+		heights: [],
+		imageHeights: {}, // 记录所有图片的实际高度
+	},
+	observers: {
+		heights: function(heights) {
+			let imageData = this.data.imageData
+			if (heights.length === imageData.length) {
+				let maxHeight = Math.max.apply(null, heights)
+				this.setData({
+					maxHeight,
+				})
+				wxService.nextTick(() => {
+					this.triggerEvent(
+						'imageLoad',
+						{ maxHeight, windowWidth: this.data.windowWidth },
+						{ bubbles: true, composed: true }
+					)
+				})
+			}
+		},
+	},
 	/**
 	 * 组件的方法列表
 	 */
   methods: {
+		imageLoad: function(e) {
+			// 图片加载完成回调
+			let heights = this.data.heights
+			let id = e.target.id
+			var imageWidth = e.detail.width
+			var imageHeight = e.detail.height
+			var ratio = imageWidth / imageHeight
+			var sysRes = app.globalData.systemInfo
+			var imageHeights = this.data.imageHeights
+			const height = (sysRes.windowWidth - (this.data.padding * sysRes.windowWidth) / 750) / ratio
+			heights.push(height)
+			imageHeights[id] = height
+			this.setData({
+				imageHeights: imageHeights,
+				windowWidth: sysRes.windowWidth,
+				heights
+			})
+		},
     preview(event) {
       const ev = event.currentTarget.dataset;
 			let curItemType = ev.item

src/component/imageSwiper/imageSwiper.wxml

@@ -6,19 +6,20 @@
  interval="{{interval}}"
  circular="{{circular}}"
  duration="{{duration}}"
+ style="height: {{maxHeight}}px;"
 >
-	<block wx:for="{{imageData}}" wx:key="{{item}}">
+	<block wx:for="{{imageData}}" wx:key="{{index}}" wx:for-item="item">
 		<swiper-item class="swiper-item">
-			<image
+			<view
 			 wx:if="{{baseImgUrl}}"
-			 src="{{item.imageUrl}}"
 			 data-appid="{{item.link.appid}}"
 			 data-path="{{item.link.url}}"
 			 data-link="{{item.link}}"
 			 data-item="{{item}}"
 			 bindtap='preview'
-			 class="slide-image"
-			/>
+			>
+				<image bindload="imageLoad"  src="{{item.imageUrl}}"  id="swiperImg{{index}}" mode="widthFix"  class="slide-image" />
+			</view>
 		</swiper-item>
 	</block>
 </swiper>