van-tabs使用van-list第一个tab不加载数据
时间: 2024-06-17 20:03:55 浏览: 265
van-tabs 是一个基于 Vue.js 的标签页组件,可以轻松地实现标签页的切换效果,而 van-list 是 van-tabs 的一个子组件,用于展示每个标签页对应的列表数据。如果你想要让 van-list 中的第一个 tab 不加载数据,可以通过 `lazy-render` 属性来实现。
`lazy-render` 是 van-list 的一个属性,用于控制列表是否需要懒加载。如果设置为 `true`,则表示只有当对应的 tab 被点击时才会加载对应的列表数据,否则不会加载数据。因此,你可以将 `lazy-render` 设置为 `true` 并将第一个 tab 的 `name` 属性设置为其他值(例如 "placeholder"),这样就可以让第一个 tab 不加载数据了。
以下是示例代码:
```html
<van-tabs>
<van-tab>Tab 1</van-tab>
<van-tab>Tab 2</van-tab>
<van-tab>Tab 3</van-tab>
<van-list :lazy-render="true">
<van-tab-pane name="placeholder"></van-tab-pane>
<van-tab-pane name="tab1">Tab 1 Content</van-tab-pane>
<van-tab-pane name="tab2">Tab 2 Content</van-tab-pane>
<van-tab-pane name="tab3">Tab 3 Content</van-tab-pane>
</van-list>
</van-tabs>
```
阅读全文