From 5a43239f964aa51a5c53d7031dc3385c94dbab42 Mon Sep 17 00:00:00 2001
From: xyytcs <273714068@qq.com>
Date: Fri, 3 Nov 2023 18:42:29 +0800
Subject: [PATCH] =?UTF-8?q?Update=20waterfall.md=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=88=97=E8=A1=A8=E5=90=8E=E8=BE=B9?=
 =?UTF-8?q?=E5=87=BA=E7=8E=B0=E7=A9=BA=E7=99=BD=E7=9A=84=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/waterfall.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/docs/component/waterfall.md b/docs/component/waterfall.md
index cf6217f9f..eb86339f6 100644
--- a/docs/component/waterfall.md
+++ b/docs/component/waterfall.md
@@ -64,3 +64,38 @@ app端nvue专用组件。
 
 **注意**
 - waterfall是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
+- 如出现waterfall列表下边大面积空白区域（多列和单列时的整体高度相同，多列展示没有高度自适应），那么可以将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在<header>中即可。
+示例代码如下：
+```html
+<template>
+  <waterfall column-count="2" column-width="auto" :style="{ height: windowHeight + 'px' }">
+    <header>
+      <!--轮播-->
+      <swiper class="swiper_banner">
+        ......
+      </swiper>
+      <!--广告位-->
+      <view class="ads_List_box">
+        ......
+      </view>
+    </header>
+    <!--瀑布流展示的商品列表-->
+    <cell v-for="num in lists" >
+      <text>{{num}}</text>
+    </cell>
+  </waterfall>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        lists: ['A', 'B', 'C', 'D', 'E'],
+        windowHeight: uni.getSystemInfoSync().windowHeight
+      }
+    }
+  }
+</script>
+
+<style></style>
+```
+<img src="https://ask.dcloud.net.cn/uploads/answer/20231103/7eca97560500b11a95f2014fdaea1281.png" />
-- 
GitLab