From 323b4a222909d580357e2cb33d94becd7d7aa99e Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Sat, 30 Mar 2024 17:36:08 +0800
Subject: [PATCH] =?UTF-8?q?scroll-view=20=E5=A2=9E=E5=8A=A0=20=E5=B5=8C?=
 =?UTF-8?q?=E5=A5=97=E6=A8=A1=E5=BC=8F=20=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/list-view.md   |  5 ++++
 docs/component/scroll-view.md | 44 ++++++++++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/docs/component/list-view.md b/docs/component/list-view.md
index 617700ff..23de5521 100644
--- a/docs/component/list-view.md
+++ b/docs/component/list-view.md
@@ -43,6 +43,11 @@ list-view组件有默认的下拉刷新样式，如果想自定义，则需使
 + 3.93版本开始支持
 + 目前自定义下拉刷新元素不支持放在list-view的首个子元素位置上。可能无法正常显示
 
+### 嵌套模式
+
+scroll-view开启嵌套模式后，list-view 可作为内层滚动视图与外层 scroll-view 实现嵌套滚动
+
+设置内层 list-view 的 `associative-container` 属性为 "nested-scroll-view"，开启内层 list-view 支持与外层 scroll-view 嵌套滚动
 
 <!-- UTSCOMJSON.list-view.compatibility -->
 
diff --git a/docs/component/scroll-view.md b/docs/component/scroll-view.md
index cb627366..da9a0f1d 100644
--- a/docs/component/scroll-view.md
+++ b/docs/component/scroll-view.md
@@ -32,6 +32,47 @@
 ```
 
 **具体代码请参考：**[自定义下拉刷新样式示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/component/scroll-view/scroll-view-custom-refresher-props.uvue)
+
+### 嵌套模式
+
+当存在两个 scroll-view 相互嵌套的场景时，两者滚动存在冲突不能很丝滑的进行衔接，可将外层 scroll-view 改成嵌套模式，这样可以让两个 scroll-view 的滚动衔接起来。
+
+```vue
+<scroll-view style="flex:1" type="nested">
+	<nested-scroll-header>
+		<view style="height: 200px;background-color: #66ccff;align-items: center;justify-content: center;">
+			<text>nested-scroll-header</text>
+		</view>
+	</nested-scroll-header>
+	<nested-scroll-body>
+		<view style="flex:1">
+			<scroll-view style="flex:1" associative-container="nested-scroll-view">
+				<view v-for="index in 20" style="background-color: aliceblue; height: 80px;justify-content: center;">
+					<text style="color: black;">{{index}}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</nested-scroll-body>
+</scroll-view>
+```
+
+**开启嵌套模式设置如下：**
+
+1. 设置外层 scroll-view 的 type 属性为 "nested" ，将外层 scroll-view 改成嵌套模式
+2. 设置内层 scroll-view 的 `associative-container` 属性为 "nested-scroll-view"，开启内层 scroll-view 支持与外层 scroll-view 嵌套滚动
+
+**嵌套滚动策略：**
+
+当向下滚动时，先滚动外层 scroll-view 再滚动里层 scroll-view；当向上滚动时，先滚动里层 scroll-view 再滚动外层 scroll-view
+
+**注意事项：**
++ 4.11版本开始支持嵌套模式
++ 外层 scroll-view 的子节点只支持`nested-scroll-header`和`nested-scroll-body`和自定义 refresher
++ 外层 scroll-view 的子节点中只能有一个 `nested-scroll-body`
++ `nested-scroll-header` 和 `nested-scroll-body` 只能有一个子节点
++ `nested-scroll-header` 只能渲染在 `nested-scroll-body` 上面
++ 与nested-scroll嵌套滚动协商互补不兼容，`nested-scroll-header` 和 `nested-scroll-body`优先级高于nested-scroll嵌套滚动协商
++ 内层滚动视图支持 scroll-view 和 list-view
 
 ### nested-scroll嵌套滚动协商@nested
 
@@ -82,7 +123,8 @@ onNestedPreScroll(event: NestedPreScrollEvent) {
 **注意：**
 + 仅Android平台支持嵌套滚动协商
 + 嵌套滚动协商仅支持竖向滚动，横向滚动不支持
-+ nested-scroll-child设置的元素必须配置custom-nested-scroll = true，否则配置无效。
++ nested-scroll-child设置的元素必须配置custom-nested-scroll = true，否则配置无效
++ 与`nested-scroll-header` 和 `nested-scroll-body`不兼容，scroll-view 设置嵌套模式后，嵌套滚动手势协商相关事件将不会触发
 
 **具体代码请参考：**[nested-scroll嵌套滚动示例](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/pages/template/long-list/long-list.uvue)
 
-- 
GitLab