低代码高性能原生UI框架Tabbar 底部导航栏
组件类型：UxTabbarComponentPublicInstance
支持正常形状和凹形，支持上下滚动、左右推压、水滴动画效果。可搭配Pages组件使用
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Slots
| 名称 | 说明 |
|---|---|
| center | 中间凸起按钮插槽 |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | 'default' | 类型 |
| anim | String | 'none' | 动效类型 |
| index | Number | 0 | 默认选择下标 |
| data | UxTab[] | - | tab列表 |
| selectedColor | String | $ux.Conf.fontColor | 选中颜色 |
| unselectedColor | String | $ux.Conf.fontColor | 未选中颜色 |
| iconSize | Number | 18 | 图标大小 |
| fontSize | Number | 12 | 字体大小 |
| fontBold | Boolean | false | 字体加粗 |
| customFont | String | - | 网络字体路径 或 自定义字体路径 |
| customFamily | String | - | 自定义字体family |
| border | Boolean | false | 显示上边框 |
| borderColor | String | $ux.Conf.borderColor | 上边框颜色 |
| corner | Number | 0 | 圆角 |
| background | String | '#ffffff' | 背景色 |
| backgroundDark | String | '#222222' | 深色 |
| centerColor | String | '#ffffff' | 中间按钮背景色 |
| zIndex | Number | 10000 | 层级z-index |
| hover | Boolean | true | 显示点击态 |
| fixed | Boolean | true | 固定定位 |
type
| 值 | 说明 |
|---|---|
| default | 正常 |
| special | 特殊 |
anim
| 值 | 说明 |
|---|---|
| none | 无 |
| scroll | 上下滚动 |
| push | 左右推压 |
| water | 水滴 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| click | 点击事件 | Function(index: number) |
| center | 中间按钮点击事件 | Function |
| change | 当前下标改变事件 | Function(index: number) |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="底部导航栏" :bold="true">
<ux-text text="支持正常形状和凹形，支持上下滚动、左右推压、水滴动画效果"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="底部导航栏" text="https://www.uxframe.cn/component/tab/tabbar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="无动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="none" :data="tabs" :corner="25" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上下滚动动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="scroll" :data="tabs" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="推压动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="push" :data="tabs" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="水滴动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="water" :data="tabs" :corner="12" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="凹形-无动画" :bold="true">
<ux-tabbar :fixed="false" type="special" anim="none" :data="tabs" :corner="12" :border="false" background="#f9f9f9">
<template v-slot:center>
<ux-icon type="plus" :size="36" color="black"></ux-icon>
</template>
</ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="凹形-上下滚动动画" :bold="true">
<ux-tabbar :fixed="false" type="special" anim="scroll" :data="tabs" :corner="20" :border="false" background="#f9f9f9">
<template v-slot:center>
<ux-icon type="surprised" :size="36" color="black"></ux-icon>
</template>
</ux-tabbar>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="底部导航栏" :bold="true">
<ux-text text="支持正常形状和凹形，支持上下滚动、左右推压、水滴动画效果"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="底部导航栏" text="https://www.uxframe.cn/component/tab/tabbar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="无动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="none" :data="tabs" :corner="25" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="上下滚动动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="scroll" :data="tabs" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="推压动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="push" :data="tabs" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="水滴动画" :bold="true">
<ux-tabbar :fixed="false" type="default" anim="water" :data="tabs" :corner="12" :border="false" background="#f9f9f9"></ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="凹形-无动画" :bold="true">
<ux-tabbar :fixed="false" type="special" anim="none" :data="tabs" :corner="12" :border="false" background="#f9f9f9">
<template v-slot:center>
<ux-icon type="plus" :size="36" color="black"></ux-icon>
</template>
</ux-tabbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="凹形-上下滚动动画" :bold="true">
<ux-tabbar :fixed="false" type="special" anim="scroll" :data="tabs" :corner="20" :border="false" background="#f9f9f9">
<template v-slot:center>
<ux-icon type="surprised" :size="36" color="black"></ux-icon>
</template>
</ux-tabbar>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
import { UxTab } from '@/uni_modules/ux-frame/libs/types/types.uts'
let title = ''
const tabs = [
{
name: '组件',
selectedIcon: 'happy',
unselectedIcon: 'happy',
selectedColor: '#c40012',
},{
name: 'API',
selectedIcon: 'devil',
unselectedIcon: 'devil',
selectedColor: '#365111',
},
{
name: '模版',
selectedIcon: 'wink',
unselectedIcon: 'wink',
selectedColor: '#f1a136',
badge: 28,
},
{
name: '切换',
selectedIcon: 'angry',
unselectedIcon: '/static/logo.png',
selectedColor: '#365111',
}
] as UxTab[]
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
import { UxTab } from '@/uni_modules/ux-frame/libs/types/types.uts'
let title = ''
const tabs = [
{
name: '组件',
selectedIcon: 'happy',
unselectedIcon: 'happy',
selectedColor: '#c40012',
},{
name: 'API',
selectedIcon: 'devil',
unselectedIcon: 'devil',
selectedColor: '#365111',
},
{
name: '模版',
selectedIcon: 'wink',
unselectedIcon: 'wink',
selectedColor: '#f1a136',
badge: 28,
},
{
name: '切换',
selectedIcon: 'angry',
unselectedIcon: '/static/logo.png',
selectedColor: '#365111',
}
] as UxTab[]
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>