método um
1. Primeiro, a largura da etiqueta do limpador é largura: 100%
2. A altura padrão do rótulo do deslizador é altura: 150px; a altura não pode ser expandida pelo conteúdo. Por padrão, a altura da imagem é sempre 150px
largura do deslizador/altura do deslizador = largura da imagem original/altura da imagem original
altura do deslizador = largura do deslizador * altura da imagem original / largura da imagem original
<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);
}
Método dois
1. Obtenha dinamicamente a altura do elemento DOM dentro do swiper-item toda vez que o switch é passado
2. Defina dinamicamente a altura obtida para o elemento swiper
<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;
});
},