uni-lb-tabbar

由于项目中经常需要用到自定义的 Tabbar，原生的 Tabbar 可自定义性有局限性，将之前写的组件加以整理，弄出一个通用的组件。

Github：点击前往

插件市场：点击前往

H5 Demo：点击预览

提供了相关示例 Demo，可以自己在插件市场导入示例项目，或者直接查看 Demo相关代码
如果问题最好去 github 反馈，插件市场评论区留下五星好评即可， 点我去反馈
最好提供一下使用的什么端，数据结构及大概的代码，我好复现找问题，不要直接提怎么xxx报错了等没意义的问题，神仙也不知道你为啥报错了。

兼容性

App + nvue + H5 + 各平台小程序（头条小程序暂不支持）

引入插件

推荐使用 easycom 引入

导入插件后再pages.json加上如下配置：

"easycom": {
  "autoscan": true,
  "custom": {
    "lb-tabbar-item": "@/components/lb-tabbar/lb-tabbar-item.vue"
  }
}

npm 安装引入

npm install uni-lb-tabbar

安装完插件后再pages.json加上如下配置：

"easycom": {
  "autoscan": true,
  "custom": {
    "lb-tabbar": "uni-lb-tabbar/components/lb-tabbar/lb-tabbar",
    "lb-tabbar-item": "uni-lb-tabbar/components/lb-tabbar/lb-tabbar-item"
  }
}

Props 参数

Tabbar Props

参数	说明	类型	可选值	默认值
v-model/value	选中标签的 name	String/Number	-	-
height	Tabbar 高度	String	-	50px
icon-size	图标大小	String	-	22px
text-size	文字大小	String	-	12px
text-top v1.0.3新增	文字的 margin-top	String	-	5px
text-height	文字高度 v1.0.3弃用 文字高度同text-size	String	-	18px
dot-color	小红点颜色	String	-	#F56C6C
fixed	是否固定在底部	Boolean	true/false	true
placeholder	是否生成等高的占位块	Boolean	true/false	true
animate	图标动画（引用了部分 Animate.css 库的动画效果，nvue 不支持）	String	zoomIn/bounce/rubberBand/bounceIn/fadeIn	-
close-animate-on-raisede	是否关闭凸起图标动画	Boolean	true/false	true
border	是否展示边框	Boolean	true/false	true
border-color	边框颜色	String	-	#DCDFE6
bg-color	背景色，默认是白色背景	String	-	#FFF
inactive-color	未选中标签的颜色	String	-	#909399
active-color	选中标签的颜色	String	-	#409EFF
active-text-color	可单独定义未选中标签文字的颜色，不填则同inactive-color	String	-	-
active-text-color	可单独定义选中标签文字的颜色,不填则同active-color	String	-	-
safe-area-inset-bottom	苹果 X 等机型底部安全区	Boolean	true/false	true
hide-tabbar	是否隐藏原生的 tabbar	Boolean	true/false	true
raisede-scale	凸起放大倍数，默认 2 倍	Number	-	2

TabbarItem Props

参数	说明	类型	可选值	默认值
name	标签的 name 名称	String/Number	-	-
text	标签底部文字，仅 nvue 支持，其他使用 默认 slot 形式	String/Number	-	-
icon	icon 图标，可为图片地址，如果是 icon 图标不需要带前缀，如icon-	String	-	-
icon-prefix	icon 图标前缀	String	-	-
dot	是否显示小红点	Boolean	true/false	-
info	图标右上角信息	String/Number	-	-
raisede	图标是否凸出	Boolean	true/false	-

Tabbar Event

事件名	说明	参数
change	切换标签时触发	当前选中TabbarItem的props
click	点击标签时触发	当前点击标签TabbarItem的props

Tabbar Methods

方法名	说明
getTabbarHeight	需要在onReady中调用，返回 Tabbar 的实际高度，包括安全区的高度