解决swiper自适应高度的问题

最新推荐文章于 2024-04-02 11:36:38 发布

qq_43351249

最新推荐文章于 2024-04-02 11:36:38 发布

阅读量544

点赞数 1

分类专栏：微信小程序文章标签： javascript 前端开发语言 swiper

本文链接：https://blog.csdn.net/qq_43351249/article/details/126606477

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 <swiper class="voting-swiper" :style="{height: `${votingHeight}rpx`}" :current="currentIndex"  indicator-color="rgba(199, 29, 38, 0.42)" indicator-active-color="#C71D26" indicator-dots="true" @change="swiperChange">
            <swiper-item class="voting-slide" v-for="(item, index) in voteInfoList" :key="index">
                <div class="voting-item" :id="'content-wrap' + index">
             ......
                </div>
            </swiper-item>
        </swiper>

 data() {
        return {
            votingHeight: 0,
            voteInfoList: [],
            currentIndex: 0
        };
    },
     onLoad(option) {
        const _this = this;
        setTimeout(() => {
            _this.setSwiperHeight();
        }, 2000);
    },

methods: {
async setSwiperHeight() {
            const element = "#content-wrap" + this.currentIndex;
            const query = uni.createSelectorQuery().in(this);
            const res = await new Promise((resolve, reject) => {
                query.select(element).boundingClientRect(data => {
                    resolve(data);
                }).exec();
            });
            this.votingHeight = res.height * 2;
            console.log(res, "setSwiperHeight");
        },
        swiperChange(e) {
            this.currentIndex = e.detail.current;
            this.setSwiperHeight();
        },
}