# 3.8 全屏页（Full Page）

全屏标签页组件，提供顶部标签和横向滑动页面内容。

# 基础用法

<template>
  <dof-full-page
    :tab-titles="[{ title: '标签一' }, { title: '标签二' }]"
    :tab-page-height="1200"
    @dofTabPageCurrentTabSelected="onTabSelected"
  >
    <div><text>标签一内容</text></div>
    <div><text>标签二内容</text></div>
  </dof-full-page>
</template>

<script>
export default {
  methods: {
    onTabSelected({ page }) {
      console.log('当前页：', page)
    },
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Attributes

Prop	Type	Required	Default	Description
`tab-titles`	`Array`	N	`[]`	标签配置，每项支持 `title`、`icon`、`activeIcon` 和 `url`
`pan-dist`	`Number`	N	`200`	滑动切换页面的最小距离
`spm-c`	`Number` \| `String`	N	`''`	标签栏埋点标识
`tab-styles`	`Object`	N	`{"titleColor":"#616C73","activeTitleColor":"#3D3D3D","isActiveTitleBold":true,"width":160,"height":40,"fontSize":24,"textPaddingLeft":10,"textPaddingRight":10}`	标签栏样式
`title-type`	`String`	N	`'icon'`	标签类型
`tab-page-height`	`Number` \| `String`	N	`1334`	页面高度
`need-slider`	`Boolean`	N	`true`	是否启用滑动切换
`duration`	`Number` \| `String`	N	`300`	切换动画时长
`timing-function`	`String`	N	`'cubic-bezier(0.25, 0.46, 0.45, 0.94)'`	切换动画函数
`isRTL`	`Boolean`	`N`	`false`	是否启用 RTL（从右到左）布局；默认关闭

RTL 下标签排列和横向切换方向镜像，page 与选中事件仍使用原标签数组索引。插槽中的组件需单独传入 isRTL。

# Slots

插槽名	说明
default	全屏页内容

# Events

事件名称	说明	回调参数
`dofTabPageCurrentTabSelected`	当前页面变化时触发	`{ page }`

# Methods

方法名	说明	参数
`next()`	切换到下一页	-
`prev()`	切换到上一页	-
`setPage(page)`	切换到指定页面	`page: Number`