uni-app自定义tabBar;uni-app小程序自定义tabBar;uni-app小程序修改中间tabBar导航栏大小;uni-app中间导航栏凸起;uni-app修改底部导航栏

本文介绍如何在uni-app中自定义小程序的中间tabBar,通过隐藏原生tabBar,创建公共组件midell-box实现凸起或图标变大的效果。详细步骤包括在pages.json配置,创建公共组件,引入组件以及处理中间按钮点击事件以弹出二级菜单。
摘要由CSDN通过智能技术生成

需求:要求小程序,中间的tabBar自定义凸起或者图标变大;
问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的;

解决思路:隐藏uni-app原有的tabBar,然后换成自己手写的导航栏,进行定位和自定义样式;

小程序页面截图:

在这里插入图片描述

H5页面截图:
在这里插入图片描述

步骤和文件结构如下:

在这里插入图片描述

一、pages.json:正常书写,注意H5的需要加上midButton部分

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/midell/index",
			"style": {
				"navigationBarTitleText": "midell"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "mine"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值