uni-app 中 swiper 轮播图高度自适应

方法一

1、首先 swiper 标签的宽度是 width: 100%

2、swiper 标签存在默认高度是 height: 150px ；高度无法实现由内容撑开，在默认情况下，图片的高度显示总是 150px

swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度

swiper 高度 = swiper 宽度 * 原图高度 / 原图宽度

<swiper class="swiper-box" indicator-dots autoplay circular><swiper-item v-for="(item, i) in imgList" :key="i"><image style="width: 100%" :src="item" mode="widthFix" /></swiper-item>
</swiper>

.swiper-box {width: 100%;height: calc(100vw * 9 / 16);
}

方法二

1、在每次滑动切换的时候，动态地获取 swiper-item 内部的 DOM 的元素的高度

2、将获取的高度动态设置给 swiper 元素

<swiper:current="currIndex"@change="changeSwiper":style="{ height: swiperHeight + 'px' }"indicator-dotsautoplaycircular:duration="1000"
><swiper-item v-for="(item, i) in imgList" :key="i"><image :id="'wrap' + i" style="width: 100%" :src="item" mode="widthFix" /></swiper-item>
</swiper>

currIndex: 0, // 当前索引
swiperHeight: 0, // 滑块的高度(单位px)

onLoad(e) {this.$nextTick(() => {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},

/* 切换 swiper 滑块 */
changeSwiper(e) {this.currIndex = e.detail.current;this.$nextTick(() => {this.setSwiperHeight(); // 动态设置 swiper 的高度});
},
/* 动态设置 swiper 的高度 */
setSwiperHeight() {const element = "#wrap" + this.currIndex;const query = uni.createSelectorQuery().in(this);query.select(element).boundingClientRect();query.exec(res => {if (res && res[0]) this.swiperHeight = res[0].height;});
},