uni-app 顶部栏增加按钮或者文字并添加事件如何实现

Posted 2023-05-03

参考技术A 方法：在page.json文件中的globalStyle配置全局顶部栏，或者在单个页面的style里面配置当前页面的标题或者按钮文字如下：（使用字体图标的话可查看文档找方法，此处只展示文字的形式）

添加事件的方法为：

uni-app 自定义组件ADTabBar 底部导航栏 支持中间自定义按钮 支持小程序

参考技术A uni-app自带的底部导航栏虽然也很好用，但是遇到中间需要有一个自定义按钮的需求的时候如果使用自带的midButton，就只支持App，小程序什么都不支持。

ADTabbar自定义底部导航栏支持App、小程序的中间自定义按钮，可以自己设置css让他凸起。

注：配合该组件的根页面（也就是每个底部菜单对应的第一个页面），需要用到自定义组件模式，详细用法可以看Demo工程

暂不支持nvue

还有不足的地方会及时优化，也欢迎提出建议！
Demo工程

在 template 中使用组件