uniapp微信小程序swiper高度自适应

用 JS 动态获取 swiper-item 的真实高度，再赋值给 swiper。

记录本次解决问题方法(实则是鞭策ai出来的_(:_」∠)_)

先确认页面渲染和获取dom元素高度时机

此页面为:

<swiper :style="{ height: swiperHeight + 'rpx' }" @change="onSwiperChange" > <swiper-item class="swiper-item" v-for="item in list" :key="item.id" > <!-- swiper内容 --> <image :src="item.img" @load="setSwiperAutoHeight"></image> </swiper-item> </swiper>

data() { return { swiperHeight: 360,//默认高度 } }

onReady() { this.setSwiperAutoHeight() // 页面一出来，就量一次高度 }, watch: { list3() { this.setSwiperAutoHeight() // 列表数据变了 → 重新量高度 } }

methods:{ onImageLoad() { this.setSwiperAutoHeight(); // 图片加载完重新量一次 }, onSwiperChange(e) { this.setSwiperAutoHeight(); // 切换也重新量 }, setSwiperAutoHeight() { this.$nextTick(() => { // 等 DOM 渲染完 setTimeout(() => { // 延迟 700ms，等图片、文字全部渲染完成 const query = uni.createSelectorQuery().in(this); // 创建测量工具 query .selectAll(".swiper_card_item") // 找到所有 swiper 卡片 .boundingClientRect((rects) => { // 【量每个卡片的真实高度】 if (!rects || rects.length === 0) return; let maxHeight = 0; rects.forEach((r) => { if (r.height > maxHeight) maxHeight = r.height;// 找出最高的卡片高度 }); this.swiperHeight = maxHeight / this.rpxRatio;// 把最高高度赋值给 swiper }).exec(); // 开始测量 }, 700); }); }, }

.swiper_card { padding: 10rpx 20rpx 20rpx; background-color: #f7f7f7; } /* 核心样式：item高度自适应*/ .swiper_card_item { width: 100%; height: auto !important; overflow: visible !important;//这个其实无所谓 background: #fff; border-radius: 20rpx; display: flex; flex-direction: column; }