uni-app中<swiper>组件的高度不能撑开

uni-app中<swiper>组件的高度不能撑开

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容] <swiper>里面添加<list>组件<swiper>不能被撑开

重现步骤

[步骤]

[结果]

[期望] <swiper>可以根据List的高度自动撑开
[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序？]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]


更多关于uni-app中<swiper>组件的高度不能撑开的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

swiper子组件的大小需要根据swiper大小计算得出（撑满swiper）。所以不能同时满足父容器的大小根据子元素计算。 这两个表现是相悖的，无法同时满足。

更多关于uni-app中<swiper>组件的高度不能撑开的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就不能造个薛定谔的swiper吗

swiper高度如果要根据子元素自适应。 唯一一个办法。
就是人工计算子元素的高度。 然后$emit给父元素 然后显示高度。
如果数据量很大。 必然会带来性能的丢失。

在uni-app中，<swiper>组件默认是固定高度的，不会自动撑开。要让<swiper>根据内容高度自适应，可以通过以下方式解决：

  1. 使用flex布局：
.swiper-container {
  display: flex;
  flex-direction: column;
}
  1. 动态计算高度：
onReady() {
  const query = uni.createSelectorQuery().in(this);
  query.select('.list').boundingClientRect(data => {
    this.swiperHeight = data.height + 'px';
  }).exec();
}
  1. 在<swiper>上绑定计算后的高度：
<swiper :style="{height: swiperHeight}">
  <swiper-item>
    <list class="list"></list>
  </swiper-item>
</swiper>
回到顶部