选项卡 Vue 组件
选项卡允许您轻松地在不同内容之间切换。选项卡 Vue 组件表示 选项卡 组件。
选项卡组件
包含以下组件：
f7-tabsf7-tab
选项卡属性
| 属性 | 类型 | 描述 |
|---|---|---|
| <f7-tabs> 属性 | ||
| animated | 布尔值 | 启用动画选项卡 |
| swipeable | 布尔值 | 启用可滑动选项卡 |
| routable | 布尔值 | 启用可路由选项卡 |
| swiper-params | 对象 | 包含 Swiper 参数 的对象（如果启用 swipeable） |
| <f7-tab> 属性 | ||
| tab-active | 布尔值 | 定义当前活动/可见的选项卡 |
| id | 字符串 | 选项卡 ID |
选项卡方法
| <f7-tab> 方法 | |
|---|---|
| .show(animate) | 显示此选项卡 |
选项卡事件
| 事件 | 描述 |
|---|---|
| <f7-tab> 事件 | |
| tab:show | 当选项卡变为可见/活动时将触发事件 |
| tab:hide | 当选项卡变为不可见/非活动时将触发事件 |
切换选项卡
您可以控制/切换选项卡
示例
静态选项卡
tabs-static.vue
<template>
<f7-page :page-content="false">
<f7-navbar title="Static Tabs"></f7-navbar>
<f7-toolbar bottom tabbar>
<f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
<f7-link tab-link="#tab-2">Tab 2</f7-link>
<f7-link tab-link="#tab-3">Tab 3</f7-link>
</f7-toolbar>
<f7-tabs>
<f7-tab id="tab-1" class="page-content" tab-active>
<f7-block>
<p>Tab 1 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-2" class="page-content">
<f7-block>
<p>Tab 2 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-3" class="page-content">
<f7-block>
<p>Tab 3 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
</f7-tabs>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7Block,
f7Tabs,
f7Tab,
f7Link,
f7Toolbar,
},
};
</script>
动画选项卡
tabs-animated.vue
<template>
<f7-page :page-content="false">
<f7-navbar title="Animated Tabs"></f7-navbar>
<f7-toolbar bottom tabbar>
<f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
<f7-link tab-link="#tab-2">Tab 2</f7-link>
<f7-link tab-link="#tab-3">Tab 3</f7-link>
</f7-toolbar>
<f7-tabs animated>
<f7-tab id="tab-1" class="page-content" tab-active>
<f7-block>
<p>Tab 1 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-2" class="page-content">
<f7-block>
<p>Tab 2 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-3" class="page-content">
<f7-block>
<p>Tab 3 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
</f7-tabs>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7Block,
f7Tabs,
f7Tab,
f7Link,
f7Toolbar,
},
};
</script>
可滑动选项卡
tabs-swipeable.vue
<template>
<f7-page :page-content="false">
<f7-navbar title="Swipeable Tabs"></f7-navbar>
<f7-toolbar bottom tabbar>
<f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
<f7-link tab-link="#tab-2">Tab 2</f7-link>
<f7-link tab-link="#tab-3">Tab 3</f7-link>
</f7-toolbar>
<f7-tabs swipeable>
<f7-tab id="tab-1" class="page-content" tab-active>
<f7-block>
<p>Tab 1 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-2" class="page-content">
<f7-block>
<p>Tab 2 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
<f7-tab id="tab-3" class="page-content">
<f7-block>
<p>Tab 3 content</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
suscipit temporibus sequi iure ad laboriosam accusamus?
</p>
<p>
Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
deleniti.
</p>
<p>
Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
delectus a maiores nihil dolores? Natus, perferendis.
</p>
<p>
Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
</p>
<p>
Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
explicabo, unde aliquid impedit! Adipisci!
</p>
<p>
Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
accusantium, officiis veniam nostrum cum cumque impedit.
</p>
<p>
Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
</p>
</f7-block>
</f7-tab>
</f7-tabs>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Tabs, f7Tab, f7Link, f7Toolbar } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7Block,
f7Tabs,
f7Tab,
f7Link,
f7Toolbar,
},
};
</script>