From 8ca1d414c83f836563fcb32c93b791f236479f67 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 19 Jun 2024 07:56:09 +0800
Subject: [PATCH] docs(Tab): add FQA for "swipeable" and "animated" (#12938)

---
 packages/vant/src/tab/README.md       | 24 ++++++++++++++++++++++--
 packages/vant/src/tab/README.zh-CN.md | 22 ++++++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/vant/src/tab/README.md b/packages/vant/src/tab/README.md
index 03d27027b..c4e58cd8b 100644
--- a/packages/vant/src/tab/README.md
+++ b/packages/vant/src/tab/README.md
@@ -262,12 +262,12 @@ By setting the `showHeader` prop to `false`, the title bar of the Tabs component
 | duration | Toggle tab's animation time | _number \| string_ | `0.3` |
 | line-width | Width of tab line | _number \| string_ | `40px` |
 | line-height | Height of tab line | _number \| string_ | `3px` |
-| animated | Whether to change tabs with animation | _boolean_ | `false` |
+| animated | Whether to change tabs with animation (After enabling this attribute, if there is a sticky layout in the content area, it will not meet expectations) | _boolean_ | `false` |
 | border | Whether to show border when `type="line"` | _boolean_ | `false` |
 | ellipsis | Whether to ellipsis too long title (Takes effect only if `shrink` is `false` and the number of `tabs` is less than or equal to `swipe-threshold`) | _boolean_ | `true` |
 | sticky | Whether to use sticky mode | _boolean_ | `false` |
 | shrink | Whether to shrink the the tabs to the left | _boolean_ | `false` |
-| swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
+| swipeable | Whether to enable gestures to slide left and right (After enabling this attribute, if there is a sticky layout in the content area, it will not meet expectations) | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |
 | show-header `v4.7.3` | Whether to show title bar | _boolean_ | `true` |
@@ -365,3 +365,23 @@ The component provides the following CSS variables, which can be used to customi
 | --van-tabs-bottom-bar-width   | _40px_                      | -           |
 | --van-tabs-bottom-bar-height  | _3px_                       | -           |
 | --van-tabs-bottom-bar-color   | _var(--van-primary-color)_  | -           |
+
+## FAQ
+
+### After Tabs enable the swipeable or animated attribute, the sticky function of content area elements will not meet expectations
+
+When the `swipeable` or `animated` attribute is enabled for `Tabs`, the content area will be wrapped by an element with the `transform` attribute, and if the `sticky` function is enabled for the element in the content area, the function will take effect, but the display position will not be as expected.
+
+For example, the following code:
+
+```html
+<van-tabs v-model:active="active" swipeable>
+  <van-tab>
+    <van-sticky>
+      <van-button>sticky button</van-button>
+    </van-sticky>
+  </van-tab>
+</van-tabs>
+```
+
+This is because the `fixed` positioning inside the `transform` element is computed relative to that element, not relative to the entire document, resulting in layout exceptions.
diff --git a/packages/vant/src/tab/README.zh-CN.md b/packages/vant/src/tab/README.zh-CN.md
index 01d8dd640..9cea95753 100644
--- a/packages/vant/src/tab/README.zh-CN.md
+++ b/packages/vant/src/tab/README.zh-CN.md
@@ -273,12 +273,12 @@ export default {
 | duration | 动画时间，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
 | line-width | 底部条宽度，默认单位 `px` | _number \| string_ | `40px` |
 | line-height | 底部条高度，默认单位 `px` | _number \| string_ | `3px` |
-| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
+| animated | 是否开启切换标签内容时的转场动画（开启该属性后，内容区如果有粘性布局将会不达预期） | _boolean_ | `false` |
 | border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
 | ellipsis | 是否省略过长的标题文字（仅在 `shrink` 为 `false` 且 `tab` 数量小于等于 `swipe-threshold` 时生效） | _boolean_ | `true` |
 | sticky | 是否使用粘性布局 | _boolean_ | `false` |
 | shrink | 是否开启左侧收缩布局 | _boolean_ | `false` |
-| swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
+| swipeable | 是否开启手势左右滑动切换（开启该属性后，内容区如果有粘性布局将会不达预期） | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy | 是否开启滚动导航 | _boolean_ | `false` |
 | show-header `v4.7.3` | 是否显示标题栏 | _boolean_ | `true` |
@@ -405,3 +405,21 @@ Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位
 ```js
 this.$refs.tabs.resize();
 ```
+
+### Tabs 开启 swipeable 或 animated 属性后，内容区元素的 sticky 功能将不达预期
+
+`Tabs` 开启 `swipeable` 或 `animated` 属性后，内容区将被带有 `transform` 属性的元素包裹，此时如果内容区的元素开启了 `sticky` 功能，那么该功能生效了，但显示位置将不达预期。
+
+比如下面的代码：
+
+```html
+<van-tabs v-model:active="active" swipeable>
+  <van-tab>
+    <van-sticky>
+      <van-button>sticky button</van-button>
+    </van-sticky>
+  </van-tab>
+</van-tabs>
+```
+
+这是因为 `transform` 元素内部的 `fixed` 定位会相对于该元素进行计算，而不是相对于整个文档，从而导致布局异常。