实现uniapp+Vue3中swiper组件的自动高度功能_uniapp页面高度怎么自适应

引言

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="true" interval="2000" duration="500">
				<block v-for="(item, index) in bannerList" :key="item.id">
					<swiper-item>
						<image class="top_swiper_img" :src="item.image" alt="" mode="widthFix" @load="imageLoaded(index, $event)" />
					</swiper-item>
				</block>
			</swiper>
		</view>
</template>
1
2
3
4
5
6
7
8
9
10
11

2. 脚本部分（Script）

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { post } from '../../libs/request.js'

const bannerList = ref([])
const swiperHeight = ref('300rpx');
const imageHeights = ref([]); // 存储图片的高度  

onMounted(() => {
	getBanner();
})

/**
 * 图片加载完成  
 */
const imageLoaded = (index, event) => {
	const { width, height } = event.detail;
	let actualHeight = height / (width / 750);
	imageHeights.value[index] = actualHeight;
	if (index === 0) {
		swiperHeight.value = actualHeight + 'rpx';
	}
}

/**
 * swiper 切换  
 */
const onSwiperChange = async (e) => {
	const index = e.detail.current;
	await nextTick();
	const currentImageHeight = imageHeights.value[index];
	swiperHeight.value = currentImageHeight + 'rpx';
}

/**
 * 获取轮播图
 */
const getBanner = () => {
	post("Banner/getList", {}).then((result) => {
		if (result.code == 0) {
			bannerList.value = result.data;
		}
	})
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46