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

HJD2018

已于 2024-04-02 11:43:20 修改

阅读量1k

点赞数 10

分类专栏： uniapp 文章标签： node.js

于 2024-04-02 11:36:38 首次发布

本文链接：https://blog.csdn.net/hjd2018/article/details/137261819

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

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

一、实现思路

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

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

二、代码实现

模板部分（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>

脚本部分（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>