uni-app waterfall多列展示总体高度跟单列展示相同会导致列表后边大面积空白

项目信息	详情
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	Windows 10专业版 22H2
HBuilderX类型	正式
HBuilderX版本	3.7.11
手机系统	Android
手机系统版本	Android 10
手机厂商	android studio模拟器
手机机型	Pixel_3_XL_API_29
页面类型	nvue
Vue版本	vue2
打包方式	离线
项目创建方式	HBuilderX

示例代码：

<waterfall
column-count="2"
column-width="auto"

<cell  v-for="(item, index) in goodsList" :key="index">
888
</cell>
</waterfall>

操作步骤：

就很简单的demo，各种参数调试都是一样，不管单列还是多列总高度都是一样的

预期结果：

多列展示自适应高度展示

实际结果：

不能自适应高度

bug描述：

如下图，多列展示的总高度是跟单列的时候相同的，会导致下边大面积空白。

htzhanglong 1楼•10 天前

试了真机也是一样的展示，估计不是机型问题

ionicwang 2楼•10 天前

页面中单个列表展示的问题已经解决，给页面容器添加高度就好了： <template>
<view class="page" v-bind:style="{ height: windowHeight + 'px'}">
<waterfall :scrollable=“true” :show-scrollbar=“false” offset-accuracy=“0” @loadmore=“loadMore” ref=“list”
columnCount=“2” :column-gap=“10” loadmoreoffset=“10” :left-gap=‘10’ :right-gap=‘10’ class='flex-1 bg-white w-100 '>
<cell v-for="(item, index) in pageList" :key="index">
…
</cell>
</waterfall>
</view>
</template>

但是，如果页面中并不是只有瀑布流，那这种方法依然不行

nodeper 3楼•10 天前

问题解决，把waterfall放在页面父容器下，给父容器设置高度为窗口界面高度，非列表的内容都放在

标签里边就可以了。建议官方还是更新下开发文档吧，说明下这个情况，社区里边提这个问题都好几年了，都靠自己摸索了。

songsunli 4楼•10 天前

在 uni-app 中使用 waterfall 多列展示时，如果总体高度与单列展示相同，可能会导致列表后边出现大面积空白。这是因为 waterfall 布局会根据内容的高度动态调整每列的布局，如果内容高度不一致，可能会导致某些列的内容较少，从而在底部留下空白。

解决方案

动态计算高度：
- 在 waterfall 布局中，确保每列的内容高度尽可能一致。可以通过动态计算每列的高度，并在内容不足时填充空白区域。
- 例如，可以在每列的最后添加一个占位元素，使其高度与最长列的高度一致。
使用 flex 布局：
- 如果 waterfall 布局无法满足需求，可以考虑使用 flex 布局来实现多列展示。flex 布局可以更好地控制每列的宽度和高度，避免出现空白区域。
分页加载：
- 如果数据量较大，可以考虑分页加载数据，避免一次性加载过多数据导致布局问题。每次加载一页数据，确保每列的内容高度相对一致。
使用 grid 布局：
- grid 布局可以更灵活地控制多列展示的布局，确保每列的高度一致。可以通过设置 grid-template-rows 来控制每行的高度，避免出现空白区域。

示例代码

以下是一个使用 flex 布局实现多列展示的示例：

<template>
  <view class="container">
    <view class="column" v-for="(column, index) in columns" :key="index">
      <view class="item" v-for="item in column" :key="item.id">
        <!-- 内容展示 -->
        <image :src="item.image" mode="aspectFill"></image>
        <text>{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 你的数据
      ],
      columns: [[], [], []], // 假设分为3列
    };
  },
  created() {
    this.splitItemsIntoColumns();
  },
  methods: {
    splitItemsIntoColumns() {
      this.items.forEach((item, index) => {
        const columnIndex = index % this.columns.length;
        this.columns[columnIndex].push(item);
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-between;
}

.column {
  flex: 1;
  margin: 0 5px;
}

.item {
  margin-bottom: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

image {
  width: 100%;
  height: 150px;
  border-radius: 5px;
}

text {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
</style>

uni-app waterfall多列展示总体高度跟单列展示相同 会导致列表后边大面积空白