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

lily_zhouou

于 2020-04-22 10:21:04 发布

阅读量8.3k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/qq_41595903/article/details/105585769

版权

本文探讨了在uniapp中遇到Swiper组件高度不自适应的问题。为了解决这个问题，作者通过计算内容区域的高度并动态绑定到swiper组件的style属性上，实现了高度的自适应。特别地，由于内容包含图片，需要在图片加载完成后才能准确计算高度，以确保Swiper组件的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

使用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')"

最低0.47元/天解锁文章