更新记录

1.0.13(2023-07-05)

修改tabbar页路径,都改为index.vue

1.0.12(2023-06-08)

默认字体颜色改为#666666,修复上边框默认值问题,字体行高设为initial

1.0.11(2023-06-08)

修改默认字体颜色为#333333

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

pyh-tab 全自定义tab栏

pyh-tab tabBar栏组件,组件名:pyh-tab,代码块: pyh-tab。

使用方式:

uni_modules:

uni_modules使用方法

非uni_modules: 如何从插件市场下载使用组件 uni-app插件市场的插件详情页,右上角uni_modules版本下载插件ZIP,解压/拉入components文件夹到 uni-app 根目录

main.js 中引用组件 (示例项目main.js有注释,去掉对应注释可以直接使用)


import tab from "@/components/pyh-tab/pyh-tab.vue";
// #ifndef VUE3
Vue.component("pyh-tab",tab)
// #endif
// #ifdef VUE3
//在const app = createSSRApp(App)后添加
app.component('pyh-tab',tab)
// #endif

template 中使用组件


<pyh-tab></pyh-tab>

script 中 tabBar 说明

所有配置都为选填,无需要可以不配置,不复杂!!!
所有配置都为选填,无需要可以不配置,不复杂!!!
所有配置都为选填,无需要可以不配置,不复杂!!!

pyh-tab.vue 内配置说明:

涉及到全局变量getApp().globalData

属性名 类型 默认值 说明
mainColor String '#FF3636' tabBar栏的活动态颜色,可以通过getApp().globalData.mainColor或自定义颜色,本人开发的导航栏pyh-nv也用这个,注意区分兼容
tabBar Object 可设置后覆盖组件内默认配置,详细配置见下方tabBar说明

tabBar 属性说明:

属性名 类型 默认值 说明
show Boolean true 是否显示tabBar栏,可以用于多情形控制tabBar栏的显示
fixedAssist Object 固定定位辅助容器,不填默认存在,{hide:false}
type String 'default' 目前有default(常规)和slot(自定义插槽)
position String 'bottom' 定位属性,暂时只支持bottom
color String '#666666' tabBar栏字体/字体图标常态颜色
selectedColor String mainColor tabBar栏字体/字体图标活动态颜色,默认值为getApp().globalData.mainColor,可覆盖
backgroundColor String '' tabBar栏背景色,铺满tabBar栏
backgroundImage String '' tabBar栏背景图,铺满tabBar栏
borderStyle String '' tabBar栏上边框颜色,不填不显示边框
list Array [] tabBar栏子项列表,详细配置见下方list数组的子项说明

list数组的子项 属性说明:

属性名 类型 默认值 说明
show Boolean true 是否显示当前项,可以用于多情形控制tabBar子项的显示
pagePath String 页面路径 当前项页面路径,如:/pages/index/index,有没/开头都可以
text String '' 当前项文字描述,可不填为空
iconPath String '' 当前项常态的图标,填入图片路径,有没/开头都可以
selectedIconPath String '' 当项活动态的图标,同于iconPath格式,可不传同iconPath
iconfont String '' 字体图标路径(可在组件内更换字体图标的引入),和iconPath互斥,活动态时自动变为活动色

组件pyh-tab 事件说明(详情请参考示例项目):

属名 说明
tabSlotTap tabBar.type为slot时,tabBar点击事件
tabTap 点击子项,触发事件,返回子项属性和下标

感谢:

有更多优化建议和需求,请联系作者 panyh 。谢谢!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问