blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 05:42:44 +08:00
Code Issues Projects Releases Wiki Activity

docs(Tab): add FQA for "swipeable" and "animated" (#12938)

Browse Source
This commit is contained in:
pany 2024-06-19 07:56:09 +08:00 committed by GitHub
parent cda840a728
commit 8ca1d414c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/vant/src/tab/README.md
View File

@ -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.

22
packages/vant/src/tab/README.zh-CN.md
View File

@ -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` 定位会相对于该元素进行计算，而不是相对于整个文档，从而导致布局异常。