1.0.3 • Published 3 years ago

uni-lb-tabbar v1.0.3

Weekly downloads
55
License
MIT
Repository
github
Last release
3 years ago

由于项目中经常需要用到自定义的 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选中标签的 nameString/Number--
heightTabbar 高度String-50px
icon-size图标大小String-22px
text-size文字大小String-12px
text-top v1.0.3新增文字的 margin-topString-5px
text-height文字高度 v1.0.3弃用 文字高度同text-sizeString-18px
dot-color小红点颜色String-#F56C6C
fixed是否固定在底部Booleantrue/falsetrue
placeholder是否生成等高的占位块Booleantrue/falsetrue
animate图标动画(引用了部分 Animate.css 库的动画效果,nvue 不支持)StringzoomIn/bounce/rubberBand/bounceIn/fadeIn-
close-animate-on-raisede是否关闭凸起图标动画Booleantrue/falsetrue
border是否展示边框Booleantrue/falsetrue
border-color边框颜色String-#DCDFE6
bg-color背景色,默认是白色背景String-#FFF
inactive-color未选中标签的颜色String-#909399
active-color选中标签的颜色String-#409EFF
active-text-color可单独定义未选中标签文字的颜色,不填则同inactive-colorString--
active-text-color可单独定义选中标签文字的颜色,不填则同active-colorString--
safe-area-inset-bottom苹果 X 等机型底部安全区Booleantrue/falsetrue
hide-tabbar是否隐藏原生的 tabbarBooleantrue/falsetrue
raisede-scale凸起放大倍数,默认 2 倍Number-2

TabbarItem Props

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

Tabbar Event

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

Tabbar Methods

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

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago