如何使用TabPanel标签页面组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍了使用 TabPanel 标签页面组件的不同方式以及相关 API。

在 Kylin 工程中使用该组件。
在其他工程中使用，请通过 ESModule 的方式导入组件。
API 说明提供了 props、slots、events 的接口信息。

此外，如需查看该组件的视觉效果及示例代码，参考本文的 Demo。

Kylin

<dependency component="{ TabPanel, TabPanelItem }" src="@alipay/antui-vue" ></dependency>

ESModule

import { TabPanel, TabPanelItem } from '@alipay/antui-vue';

API 说明

TabPanel
TabPanelItem

TabPanel

props

属性	说明	类型	默认值
scroll	是否支持滚动。	boolean	true
labels	顶部显示标签。	Array	[]
value	选中的 tab item 的 index，用来支持 `v-model` 绑定。	Number	0
initial-value	初始选中的 tab item 的 index，用来支持不需要 `v-model` 绑定的场景（性能更好）。	Number	0
resistant	滑动超出屏幕范围时的速度比率 (px/s)。	Number	0.2
reverseTime	超出屏幕范围回弹时间，单位为秒。	Number	0.15
reverseTimingFunction	超出屏幕范围回弹缓动时间。	String	-
slideTime	滑动后的惯性时间，单位为秒。	Number	0.3
slideTimingFunction	滑动后的缓动函数。	String	cubic-bezier(.86,0,.07,1)
slideRate	滑动后的惯性距离比例 (distance = slideRate * speed)。	Number	0.1

slots

用于填充 TabPanelItem。

events

属性

说明

函数

input

选中 item 时触发 index 为选中 item 的索引，再次选中当前 item 时依然会触发。

该问题在 0.4.8-open02 版本已经修复。

Function (index: number): void

TabPanelItem

slots

填充内容的占位。

Demo

截图

代码示例

<template>
  <TabPanel
    :labels="['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']"
    v-model="selected"
  >
    <TabPanelItem
      v-for="i in 7"
      style="text-align: center; height: 100px; background: white"
    >
      内容{{ i }}
    </TabPanelItem>
  </TabPanel>
</template>

<script>
  export default {
    data() {
      return {
        selected: 0,
      };
    },
  };
</script>