# Tab栏续集&滑动卡片组件

{% embed url="<https://v.douyin.com/r8RYmJk/>" %}

{% embed url="<https://www.bilibili.com/video/BV1Ar4y1G7ZE/>" %}

上期视频发布以后

很多小伙伴问为什么往左滑就没问题

对此啊我是这样理解的

假如啊这是一个手机的屏幕

那这里边肯定会渲染一些内容

那当他渲染完以后呢

这个页面就固定下来了

这里就是 x 坐标为0的地方

假如他的宽度是600呢

那这里就是他的 x 坐标为

600的地方

好这时候呢假设我们有两层

分别一个是泡到这了

一个是泡到这了

这两层的横坐标分别是多少呢

首先这个

他可能就是 x 为

那这个呢

他可能就变成了 x 为-

那这两个元素假设一个是 A

一个是 B

哪一个会把文档撑大呢

就是这个 B

为什么呢

因为 他是跑到了负数里面

我们都知道

滚动条

他只能在大于零的范围内去滚动

就是这个范围他不会滚动到负数

所以呢上一期这个视频里边

他往左滑就不会出现撑大的问题

好这是今天说的第一个事

第二个事呢就是很多小伙伴问

他这个用的

是哪个组件

那我也替大家看了一下这个项目

他用的就是这个vue-tinder这个组件

在这里他还有一个在线的例子

然后还能撤回


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/tab-lan-xu-ji-hua-dong-ka-pian-zu-jian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.