【uniapp小程序】使用swiper时，swiper-item高度不一致时，动态设置swiper的高度

当swiper切换执行change事件时获取当前swiper-item的内容高度来改变swiper高度。

tempalte

<template>
	<view>
		<uni-swiper-dot :info="tableData" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
			<swiper class="swiper-box" @change="handleSwiperChange" :style="{ height: `${swiperHeight}px` }">
				<block v-for="(item, index) in tableData" :key="index">
					<swiper-item>
						<view class="swiper-item approval-list" :id="`swiper-item-${index}`">
							<view class="approval-item">
								<text class="name">字段1:</text>
								<text class="cont">{{ item.sendDate }}</text>
							</view>
							<view class="approval-item">
								<text class="name">字段2:</text>
								<text class="cont">{{ item.entrustSendNo }}</text>
							</view>
							<view class="approval-item">
								<text class="name">字段3:</text>
								<text class="cont">{{ item.carNo }}</text>
							</view>
							<view class="approval-item">
								<text class="name">字段4:</text>
								<text class="cont">{{ item.isThird }}</text>
							</view>
							<view class="approval-item">
								<text class="name">字段5:</text>
								<text class="cont">{{ item.thirdCompanyName }}</text>
							</view>
							<view class="approval-item">
								<text class="name">备注:</text>
								<text class="cont">{{ item.remark }}</text>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 150,
				tableData: [{
					sendDate: '11111111111',
					entrustSendNo: '22222222222222222',
					carNo: '22222222222',
					isThird: '否',
					thirdCompanyName: '2222222333333333',
					remark: '2222'
				}, {
					sendDate: '11111111111',
					entrustSendNo: '22222222222222222',
					carNo: '22222222222',
					isThird: '否',
					thirdCompanyName: '2222222333333333',
					remark: '22333333333333333333333333333333333333333333333322'
				}],
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: '#dadada',
					border: '1px #dadada solid',
					color: '#fff',
					selectedBackgroundColor: '#3c9cff',
					selectedBorder: '1px #3c9cff solid',
				}
			}
		},
		methods: {
			handleSwiperChange(e) {
				this.current = e.detail.current
				let element = '#swiper-item-' + this.current
				let query = uni.createSelectorQuery().in(this)
				query.select(element).boundingClientRect()
				query.exec((res) => {
					console.log(res)
					if (res && res[0]) {
						this.swiperHeight = res[0].height + 20
					}
				})
			},
		},
	}
</script>

<style></style>