测试 - Layui

// Bug：打开页面时计算的swiper偶尔不正确，可能与图片加载速度有关，切换时没问题，待修复
<swiper :current="swiper_current_index" @change="swiper_change" :style="{height:swiper_height+'px'}" indicator-dots autoplay circular :duration="1000">
    <swiper-item v-for="(item, index) in swiper_list" :key="index">
        <image :id="'wrap_'+index" style="width:100%" :src="item" mode="widthFix" />
    </swiper-item>
</swiper>

data() {
    return {
        swiper_list: [],
        swiper_current_index: 0,
        swiper_height: 0,
    }
},

onReady() {
    setTimeout(() => {
        this.$nextTick(() => {
            this.swiper_get_height(); // 动态设置 swiper 的高度
        });
    }, 300)
},

// 接口获取的数据组装
this.swiper_list = res.data.data.order_design_image.map(item => {
    return `${this.__API__}/storage/${item.path}`
})

methods: {
    // 切换swiper滑块
    swiper_change(e) {
        this.swiper_current_index = e.detail.current;
        this.$nextTick(() => {
            this.swiper_get_height(); // 动态设置 swiper 的高度
        });
    },
    // 动态设置swiper的高度
    swiper_get_height() {
        const element = "#wrap_" + this.swiper_current_index;
        const query = uni.createSelectorQuery().in(this);
        query.select(element).boundingClientRect();
        query.exec(res => {
            // console.log(res[0].height)
            if (res && res[0]) this.swiper_height = res[0].height;
        });
    },
}