Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Tab 标签页 ​

标签页组件，用于在不同内容区域之间进行切换。

组件类型 ​

基本用法 ​

v-model 可以使用数字下标，也可以使用字符串名称。

html
<wd-tabs v-model="tab1" @change="handleChange">
  <block v-for="item in 4" :key="item">
    <wd-tab :title="`标签${item}`">
      <view class="content">内容{{ tab1 + 1 }}</view>
    </wd-tab>
  </block>
</wd-tabs>
ts
const tab1 = ref(0)

function handleChange(event) {
  console.log(event)
}

name 匹配 ​

为 wd-tab 设置 name 后，可通过字符串值匹配当前激活项。

html
<wd-tabs v-model="tab">
  <wd-tab v-for="item in tabs" :key="item" :title="item" :name="item">
    <view class="content">内容{{ tab }}</view>
  </wd-tab>
</wd-tabs>
ts
const tabs = ref(['this', 'is', 'a', 'individual', 'example'])
const tab = ref('a')

使用徽标 ^(1.4.0) ​

通过 badge-props 为标签添加徽标。

html
<wd-tabs v-model="tabWithBadge">
  <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="item.title" :badge-props="item.badgeProps">
    <view class="content">{{ item.title }}徽标</view>
  </wd-tab>
</wd-tabs>

组件状态 ​

粘性布局 ​

设置 sticky 开启吸顶布局，可配合 offset-top 控制吸顶偏移量。

html
<wd-tabs v-model="tab2" sticky>
  <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
    <view class="content">内容{{ tab2 + 1 }}</view>
  </wd-tab>
</wd-tabs>

禁用 Tab ​

通过 wd-tab 的 disabled 属性禁用单个页签。

html
<wd-tabs v-model="tab3">
  <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`" :disabled="item === 1">
    <view class="content">内容{{ tab3 + 1 }}</view>
  </wd-tab>
</wd-tabs>

组件样式 ​

底部条样式 ​

通过 line-theme 调整底部条表现，支持 normal、text、underline、dot。

html
<wd-tabs v-model="tabLineTheme.normal" line-theme="normal">
  <wd-tab v-for="item in 4" :key="item" :title="`normal ${item}`">
    <view class="content">内容{{ item }}</view>
  </wd-tab>
</wd-tabs>

特殊样式 ​

点击事件 ​

监听 click 获取当前点击的页签信息。

html
<wd-tabs v-model="tab4" @click="handleClick" @change="handleChange">
  <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
    <view class="content">内容{{ tab4 + 1 }}</view>
  </wd-tab>
</wd-tabs>
ts
function handleClick({ index, name }) {
  console.log(index, name)
}

切换动画 ​

设置 animated 开启内容切换动画。

html
<wd-tabs v-model="tab8" animated>
  <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
    <view class="content">内容{{ tab8 + 1 }}</view>
  </wd-tab>
</wd-tabs>

手势滑动 ​

设置 swipeable 开启手势滑动，常与 animated 组合使用。

html
<wd-tabs v-model="tab5" swipeable animated>
  <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
    <view class="content">内容{{ tab5 + 1 }}</view>
  </wd-tab>
</wd-tabs>

超出滚动与导航地图 ​

标签数量超过 slidable-num 后可滑动，超过 map-num 后会显示导航地图；将 slidable 设为 always 时可始终左对齐滚动。

html
<wd-tabs v-model="tab6">
  <wd-tab v-for="item in 7" :key="item" :title="`标签${item}`">
    <view class="content">内容{{ tab6 + 1 }}</view>
  </wd-tab>
</wd-tabs>

<wd-tabs v-model="tab9" slidable="always">
  <wd-tab v-for="item in 5" :key="item" :title="`超大标签${item}`">
    <view class="content">内容{{ tab9 + 1 }}</view>
  </wd-tab>
</wd-tabs>

在弹出框中使用 ​

在微信小程序等场景中，弹出层打开后可调用 updateLineStyle 更新激活项样式。

html
<wd-button @click="handleOpenClick">打开弹窗</wd-button>
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable>
  <wd-tabs v-model="tab10" ref="tabsRef">
    <wd-tab v-for="item in tabs" :key="item" :title="item" :name="item">
      <view class="content">内容{{ tab10 }}</view>
    </wd-tab>
  </wd-tabs>
</wd-popup>
ts
import type { TabsInstance } from '@/uni_modules/wot-ui/components/wd-tabs/types'

const showPopup = ref(false)
const tabsRef = ref<TabsInstance>()

function handleOpenClick() {
  showPopup.value = true
}

function handlePopupShow() {
  tabsRef.value?.updateLineStyle(false)
}

Tabs Attributes ​

参数说明类型默认值
v-model当前激活项，可为索引或名称`numberstring`
slidable-num自动开启滚动的标签数量阈值number6
map-num显示导航地图的标签数量阈值number10
map-title v1.4.0导航地图标题string-
sticky是否开启粘性布局booleanfalse
offset-top吸顶偏移量number0
swipeable是否开启手势滑动booleanfalse
line-theme底部条样式，可选值为 normal、text、underline、dotTabsLineThemenormal
line-width底部条宽度`numberstring`
line-height底部条高度`numberstring`
color激活项文字颜色string''
inactive-color非激活项文字颜色string''
animated是否开启切换动画booleanfalse
duration动画时长，单位毫秒number300
slidable v1.4.0是否开启滚动导航，可选值为 auto、alwaysTabsSlidableauto
show-scrollbar v1.14.0滚动时是否显示滚动条booleanfalse
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

Tabs Events ​

事件名称说明参数
change激活项变化时触发{ index, name }
click点击页签标题时触发{ index, name }
disabled点击禁用页签时触发{ index, name }
update:modelValue激活项变化时触发`number

Tabs Methods ​

方法名说明参数返回值
setActive设置激活项(value: number | string, init: boolean, setScroll: boolean)-
scrollIntoView使选中项滚动到可视区域--
updateLineStyle更新激活项底部条样式(animation?: boolean)-

Tabs Slots ​

名称说明
defaultTab 内容

Tab Attributes ​

参数说明类型默认值
name标签唯一标识，默认取索引`numberstring`
title标签标题string-
disabled是否禁用booleanfalse
lazy是否懒加载内容booleantrue
badge-props ^(1.4.0)徽标属性，透传给 Badge 组件Partial<BadgeProps>-
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

Tab Slots ​

名称说明
default页签内容

主题定制 ​

CSS 变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称默认值描述
--wot-tabs-nav-bg$filled-oppo导航背景色
--wot-tabs-nav-sticky-width100vw导航吸顶宽度
--wot-tabs-nav-color$text-secondary导航文字颜色
--wot-tabs-nav-color-active$primary-6导航激活文字颜色
--wot-tabs-nav-font-weight-active$font-weight-medium导航激活文字字重
--wot-tabs-nav-item-font-size$typography-body-size-extra-large导航项字号
--wot-tabs-nav-item-line-height$typography-body-line--height-size-extra-large导航项行高
--wot-tabs-nav-item-padding$padding-main $padding-extra-loose导航项内边距
--wot-tabs-nav-color-disabled$text-disabled导航禁用文字颜色
--wot-tabs-nav-line-bg$primary-6导航线背景色
--wot-tabs-nav-line-height$n-4导航线高度
--wot-tabs-nav-line-width$n-24导航线宽度
--wot-tabs-nav-line-bottom$n-2导航线底部偏移
--wot-tabs-duration0.3s过渡时长
--wot-tabs-map-modal-bg$opac-7_55地图模式遮罩背景
--wot-tabs-map-arrow-size$n-16地图模式箭头尺寸
--wot-tabs-map-arrow-color$icon-secondary地图模式箭头颜色
--wot-tabs-map-btn-width$n-44地图模式按钮宽度
--wot-tabs-map-btn-height$n-44地图模式按钮高度
--wot-tabs-map-btn-before-bglinear-gradient(270deg, $filled-oppo 0%, $base-transparent 100%)地图模式按钮前景渐变背景
--wot-tabs-map-color$text-main地图模式通用文字颜色
--wot-tabs-map-header-font-size$typography-body-size-extra-large地图模式头部字号
--wot-tabs-map-header-line-height$typography-body-line--height-size-extra-large地图模式头部行高
--wot-tabs-map-header-padding$padding-main $padding-extra-loose地图模式头部内边距
--wot-tabs-map-nav-btn-gap$spacing-main地图模式导航按钮间距
--wot-tabs-map-nav-btn-disabled-opacity$opacity-disabled地图模式导航按钮禁用透明度
--wot-tabs-map-nav-btn-bg$filled-bottom地图模式导航按钮背景
--wot-tabs-map-nav-btn-color$text-main地图模式导航按钮文字颜色
--wot-tabs-map-nav-btn-radius$radius-main地图模式导航按钮圆角
--wot-tabs-map-nav-btn-font-size$typography-body-size-ultra-large地图模式导航按钮字号
--wot-tabs-map-nav-btn-line-height$typography-body-line--height-size-ultra-large地图模式导航按钮行高
--wot-tabs-map-nav-btn-padding$padding-tight $padding-extra-loose地图模式导航按钮内边距
--wot-tabs-map-body-padding$padding-loose $padding-extra-loose地图模式内容内边距
--wot-tabs-map-body-bg$filled-oppo地图模式内容背景色

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng