uniapp轮播图父元素自适应图片高度

template

<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
      :duration="duration" indicator-color='rgba(255, 255, 255, 0.3)' indicator-active-color="#FFFFFF" :style="{ height: swiperHeight + 'px' }">
    <swiper-item v-for="(item, i) in swlist" :key="i">
        <image :src="item.thumb" mode="widthFix" @load="imageLoaded"></image>
    </swiper-item>
</swiper>

script

data() {
    return {

        swiperHeight: 0,
        imageHeights: []
    }
},

方法

methods: {
    imageLoaded(e) {
        const height = e.detail.height;
        const width = e.detail.width;
        // 设置swiper的宽度为屏幕宽度，并计算swiper的高度
        const swiperWidth = uni.getSystemInfoSync().windowWidth;
        const scale = width / swiperWidth;
        const imageHeight = height / scale;
        this.swiperHeight = Math.max(this.swiperHeight, imageHeight);
        this.imageHeights.push(imageHeight);
    },
}