# tui-tabbar 标签栏 开源组件
介绍
类似原生tabbar组件,可用于自定义tabbar,非必要情况下建议使用原生tabbar。
注:组件内置使用了tui-icon组件,使用时需要将此组件同时引入到项目中,且uni-app中如果不是easycom配置,需要在标签栏组件中手动进行引入图标组件。
使用建议
1、tabbar子页面可做成组件引入,切换组件显示。
2、参考链接案例使用:uni-app使用案例 (opens new window)、微信小程序使用案例 (opens new window)
# 引入
说明
请参考案例使用,以下引入仅为了介绍组件相关属性参数以及事件等。
# uni-app引入
第一种,手动引入(可全局引入)
import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
export default {
components:{
tuiTabbar
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-tabbar": "/components/thorui/tui-tabbar/tui-tabbar"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
current
属性为当前索引, backdropFilter
属性开启高斯模糊效果[仅在支持的浏览器有效果],backgroundColor
属性设置背景颜色,tabBar
属性为tabbar列表,color
属性为字体颜色,selectedColor
属性为字体选中颜色,click
为tababr切换点击事件。
<!--uni-app-->
<tui-tabbar :current="current" backdropFilter backgroundColor="#f8f8f8" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
// data 数据 及 方法
export default {
data() {
return {
current: 0,
tabBar: [
{
pagePath: '/pages/tabbar/index/index',
text: 'code',
iconPath: '/static/images/tabbar/code_gray.png',
selectedIconPath: '/static/images/tabbar/code_active.png'
},
{
pagePath: '',
text: 'extend',
iconPath: '/static/images/tabbar/release.png',
hump: true,
selectedIconPath: '/static/images/tabbar/release.png'
},
{
pagePath: '/pages/tabbar/my/my',
text: 'thor',
iconPath: '/static/images/tabbar/thor_gray.png',
selectedIconPath: '/static/images/tabbar/thor_active.png',
num: 2,
isDot: true,
verify: true
}
]
}
},
methods: {
tabbarSwitch(e) {
//获取登录状态,此处默认未登录
//跳转切换逻辑需自行实现
let isLogin = false;
if (e.verify && !isLogin) {
this.tui.toast('您还未登录,请先登录');
} else {
this.current = e.index;
}
}
}
}
<!--微信小程序-->
<tui-tabbar current="{{current}}" backdropFilter backgroundColor="#f8f8f8" tabBar="{{tabBar}}" color="#777" selectedColor="#AC9157" bindclick="tabbarSwitch"></tui-tabbar>
// data 数据 及 方法
Page({
data: {
current: 0,
tabBar: [
{
pagePath: '/pages/tabbar/index/index',
text: 'code',
iconPath: '/static/images/tabbar/code_gray.png',
selectedIconPath: '/static/images/tabbar/code_active.png'
},
{
pagePath: '',
text: 'extend',
iconPath: '/static/images/tabbar/release.png',
hump: true,
selectedIconPath: '/static/images/tabbar/release.png'
},
{
pagePath: '/pages/tabbar/my/my',
text: 'thor',
iconPath: '/static/images/tabbar/thor_gray.png',
selectedIconPath: '/static/images/tabbar/thor_active.png',
num: 2,
isDot: true,
verify: true
}
]
},
tabbarSwitch(e) {
//获取登录状态,此处默认未登录
//跳转切换逻辑需自行实现
console.log(e)
let isLogin = false
if (e.detail.verify && !isLogin) {
tui.toast("您还未登录,请先登录")
} else {
this.setData({
current: e.detail.index
})
}
}
})
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 插槽说明 |
---|---|
- | - |
# Props
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
current | Number | 当前tabbar索引 | 0 |
color | String | 字体颜色 | #666 |
selectedColor | String | 字体选中颜色 | #5677FC |
backgroundColor | String | 背景颜色 | #FFFFFF |
hump | Boolean | 是否需要中间凸起按钮 | false |
iconSize V2.1.0+ | [Number, String] | 字体图标大小,单位rpx | 52 |
isFixed | Boolean | 是否固定在底部 | true |
tabBar | Array | tabbar列表 | [] |
badgeColor | String | 角标字体颜色 | #fff |
badgeBgColor | String | 角标背景颜色 | #F74D54 |
unlined | Boolean | 去掉顶部细线 | false |
backdropFilter | Boolean | 是否开启高斯模糊效果[仅在支持的浏览器有效果] | false |
zIndex | [Number, String] | z-index值,isFixed为true时生效 | 9999 |
pagePath
页面路径
text
标题
iconPath
图片图标地址
selectedIconPath
选中图片图标地址
name
字体图标名称,使用字体图标时,图片图标失效 V2.1.0+
activeName
选中字体图标名称 V2.1.0+
customPrefix
自定义图标所定义字体class名称,具体可查看tui-icon组件文档 V2.1.0+
iconSize
字体图标大小,单位rpx,不传值则默认使用 props 中 iconSize 值 V2.1.0+
hump
是否为凸起图标
num
角标数值
isDot
角标是否为圆点
verify
是否需要先验证 (如登录)
# Events
注:uni-app端绑定事件使用@前缀,如@click;微信小程序原生使用bind前缀,如bindclick
事件名 | 说明 | 回调参数 |
---|---|---|
click | tababr切换点击事件 | { index: 索引值, hump: 是否为凸起图标, pagePath: 页面路径, verify: 是否需要验证 } |
# 预览
# 特别说明
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |