vant组件库中的Tab 标签页怎样设置里面的内容出现滚动条 移动端 高度不是固定的
时间: 2024-02-03 18:12:11 浏览: 173
顶部横向滚动的标签控件
可以使用`van-tab`组件中的`lazy-render`属性来实现只渲染当前激活的Tab内容,这样可以避免所有Tab内容都同时渲染导致页面卡顿的问题。然后在Tab内容的外层包裹一个带有固定高度和`overflow-y: auto`属性的容器,这样当Tab内容超出容器高度时就会出现滚动条,并且可以适应不同高度的移动端设备。
代码示例:
```html
<van-tabs v-model="active">
<van-tab title="Tab 1">
<div class="scroll-container">
<p>Tab 1 Content</p>
<p>Tab 1 Content</p>
<p>Tab 1 Content</p>
<!-- ... -->
</div>
</van-tab>
<van-tab title="Tab 2">
<div class="scroll-container">
<p>Tab 2 Content</p>
<p>Tab 2 Content</p>
<p>Tab 2 Content</p>
<!-- ... -->
</div>
</van-tab>
<!-- ... -->
</van-tabs>
```
```css
.scroll-container {
height: calc(100vh - 120px); /* 容器高度随设备高度自适应,减去其他元素高度 */
overflow-y: auto; /* 开启垂直滚动条 */
}
```
阅读全文