【uniapp】swiper组件高度自适应问题

最新推荐文章于 2024-07-25 09:24:40 发布

lily_zhouou

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量7.7k

点赞数 1

分类专栏： uni-app 文章标签：前端

本文链接：https://blog.csdn.net/qq_41595903/article/details/105585769

版权

场景

使用uniapp中的swiper组件进行轮播，swiper组件高度是在外层有个默认高度，并没有去适配里面的内容高度。

解决

计算出内容高度height，然后使用动态绑定style的方式将内容高度重新复制给swiper组件。（由于我的swiper内容区包含图片资源，图片资源没有加载完导致内容区高度计算出错，所以我将高度计算放在图片资源加载完成后）

      <swiper class="swiper" :indicator-dots="indicatorDots" :circular="circular" indicator-active-color="#feba50" :style="{height: listHeight}">
            <swiper-item v-for="(item, index) in prizeList" :key="index">
                <view class="swiper-item">
                    <img class="ui" :src="item.iu" alt=""  @load="fixSwiperHeight('.swiper-item')"