实现uniapp+Vue3中swiper组件的自动高度功能

引言

uniapp中swiper组件默认并不支持内容自适应高度，这在展示不同尺寸的图片时可能会导致显示问题。本文将介绍如何使用Vue3的组合式API（Composition API）来实现swiper组件的自动高度功能。

一、实现思路

自动高度？父元素使用 height：auto不就行了
虽然将高度设置为 auto 在某些场景下是可行的，但需要注意的是，在移动应用开发中，滑动视图通常需要一个明确的高度来确保滑动效果的正常运作。

1. 监听图片加载事件：当swiper中的图片加载完成时，获取其原始宽度和高度。
2. 计算实际高度：根据图片的原始宽高比和设定的宽度（例如750rpx），计算出图片在目标宽度下的实际高度。
3. 动态设置swiper高度：将计算出的实际高度应用到swiper组件的样式上，以实现高度自适应。

二、代码实现

1. 模板部分（Template）

 <template>
	<view class="top_swiper">
			<swiper @change="onSwiperChange" class="swiper" :style="{ height: swiperHeight }" circular indicator-dots="true" :autoplay=