方法一(好像只對第一張起作用)
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、在每次滑動切換的時候，動態(tài)地獲取 swiper-item 內部的 DOM 的元素的高度文章來源：http://www.zghlxwxcb.cn/news/detail-701936.html
2、將獲取的高度動態(tài)設置給 swiper 元素文章來源地址http://www.zghlxwxcb.cn/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(); // 動態(tài)設置 swiper 的高度
});
},/* 切換 swiper 滑塊 */
changeSwiper(e) {
this.currIndex = e.detail.current;
this.$nextTick(() => {
this.setSwiperHeight(); // 動態(tài)設置 swiper 的高度
});
},
/* 動態(tài)設置 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模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
