uniapp 支付宝小程序swiper坑

原创已于 2025-08-23 14:58:48 修改 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序

于 2025-08-23 13:44:56 首次发布

一、问题描述

1、swiper高度赋值不生效，写法是:style="{ height: swiperHeight }"，发现高度设置不生效，即使写成固定值也不行。

2、有四张轮播图，只有第一张正常显示，其余三张不展示且查看元素高度为0

3、另一个页面中也用了swiper,也是高度有问题，swiper的高度竟然没有swiper-item下view内容高度高，导致内容展示不全。我的view是写了一个固定高度，swiper写的height：100%；swiper-item写的height:auto;

二、问题解决

1、swiper添加maxHeight动态赋值:style="{ height: swiperHeight, maxHeight: swiperHeight }"或者写死max-height:520px;

2、因为我的层级是这样的

swiper > swiper-item > view(class为.item) > image
如图所示

就因为我的样式.swiper-item中多写了一个position:relative;导致的问题，去掉即可

3、具体样式如下：

.swiper {
			width: 100%;
			height: 100%;
			overflow: auto; /* 添加溢出隐藏 */
		}
		.swiperItem {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			width: 560rpx!important;
			border: none!important;
			height: auto;
		}
		.item {
			width: 452rpx;
			height: 580rpx;
			border-radius: 16rpx;
			background: #f4fdff;
			padding: 0 34rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

解决：动态获取内容高度且动态调整高度解决。

      getSwiperHeight() {
			const query = uni.createSelectorQuery().in(this);
			query
			.select('.item')
			.boundingClientRect((data) => {
				if (data && data.height) {
				  this.swiperHeight = data.height + 16 + 'px !important';
				}
			})
			.exec();
		},

swiper上加上 :style="{ height: swiperHeight}"，而且这时候不用加max-height,但是问题1 不写max-height就不行，可能是问题1 中内容元素是图片，设置了mode="widthFix"高度自动变化，而问题3内容view是写死的高度，所以只需要设置height即可吧。

也是大大的无语了，而且微信小程序中也没事。