# tui-tabbar 标签栏
介绍
类似原生tabbar组件,可用于自定义tabbar,非必要情况下建议使用原生tabbar。
使用建议
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="backgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
<!--微信小程序-->
<tui-tabbar current="{{current}}" backdropFilter backgroundColor="{{backgroundColor}}" tabBar="{{tabBar}}" color="#777" selectedColor="#AC9157" bindclick="tabbarSwitch"></tui-tabbar>
//data 数据
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
}
]
# Slots
none
# Props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
current | Number | 当前tabbar索引 | 0 |
color | String | 字体颜色 | #666 |
selectedColor | String | 字体选中颜色 | #5677FC |
backgroundColor | String | 背景颜色 | #FFFFFF |
hump | Boolean | 是否需要中间凸起按钮 | false |
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 |
tabBar属性 Object对象参数说明
pagePath
页面路径
text
标题
iconPath
图标地址
selectedIconPath
选中图标地址
hump
是否为凸起图标
num
角标数值
isDot
角标是否为圆点
verify
是否需要先验证 (如登录)
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | tababr切换点击事件 | { index: 索引值, hump: 是否为凸起图标, pagePath: 页面路径, verify: 是否需要验证 } |
# 预览
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |