需求:要求小程序,中间的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",