方法一(好像只对第一张起作用)
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 的元素的高度文章来源:https://www.toymoban.com/news/detail-701936.html
2、将获取的高度动态设置给 swiper 元素文章来源地址https://www.toymoban.com/news/detail-701936.html
<swiper
:current="currIndex"
@change="changeSwiper"
:style="{ height: swiperHeight + 'px' }"
indicator-dots
autoplay
circular
: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;
});
},
到了这里,关于uni-app 中 swiper 轮播图高度自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!