<waterfall
column-count="2"
column-width="auto"
<cell v-for="(item, index) in goodsList" :key="index">
888
</cell>
</waterfall>
c***@e-buy.com
- 发布：2023-11-03 16:17
- 更新：2023-11-03 18:04
- 阅读：218
产品分类： 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
示例代码：
操作步骤：
就很简单的demo，各种参数调试都是一样，不管单列还是多列总高度都是一样的
就很简单的demo，各种参数调试都是一样，不管单列还是多列总高度都是一样的
预期结果：
多列展示自适应高度展示
多列展示自适应高度展示
实际结果：
不能自适应高度
不能自适应高度
bug描述：
如下图，多列展示的总高度是跟单列的时候相同的，会导致下边大面积空白。
c***@e-buy.com (作者)
页面中单个列表展示的问题已经解决，给页面容器添加高度就好了：
<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>
<script>
export default {
data() {
return {
windowHeight: uni.getSystemInfoSync().windowHeight
}
},
}
</script> 但是，如果页面中并不是只有瀑布流，那这种方法依然不行
c***@e-buy.com (作者)
问题解决，把waterfall放在页面父容器下，给父容器设置高度为窗口界面高度，非列表的内容都放在<header>标签里边就可以了。
建议官方还是更新下开发文档吧，说明下这个情况，社区里边提这个问题都好几年了，都靠自己摸索了。
