uni-app 底部导航栏 中间按钮 变大

在 uni-app 中实现底部导航栏（Tab Bar）时，可以通过自定义样式来调整中间按钮的大小。以下是一个示例代码，展示了如何配置 pages.json 文件以及如何通过样式调整使中间按钮变大。

1. 配置 pages.json

首先，在 pages.json 中配置底部导航栏。这里假设我们有三个页面：首页、消息、我的。我们希望中间的“消息”按钮变大。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/message/message",
      "style": {
        "navigationBarTitleText": "消息"
      }
    },
    {
      "path": "pages/mine/mine",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icon_home.png",
        "selectedIconPath": "static/icon_home_active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "static/icon_message.png",
        "selectedIconPath": "static/icon_message_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/icon_mine.png",
        "selectedIconPath": "static/icon_mine_active.png"
      }
    ]
  }
}

2. 自定义样式调整中间按钮大小

由于 uni-app 官方文档没有直接提供调整单个 tab 项大小的 API，我们需要通过覆盖默认样式来实现。可以通过在 App.vue 或相关页面的样式中添加自定义样式。

<style scoped>
/* 覆盖 tab-bar 样式 */
.custom-tab-bar .uni-tab-bar__item:nth-child(2) .uni-tab-bar__label,
.custom-tab-bar .uni-tab-bar__item:nth-child(2) .uni-tab-bar__icon {
  font-size: 18px; /* 调整文字大小 */
  transform: scale(1.2); /* 调整图标大小 */
}

/* 如果需要调整整个 tab 项的大小，可以调整 padding 或其他属性 */
.custom-tab-bar .uni-tab-bar__item:nth-child(2) {
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>

注意：由于 uni-app 的样式隔离机制，直接在 App.vue 中添加的样式可能无法直接作用于 tab bar。此时，你可能需要使用自定义组件来实现底部导航栏，并在该组件中应用上述样式。

此外，由于平台差异（如微信小程序、H5、App等），样式调整可能需要针对不同平台进行微调。上述代码提供了一个基本的思路，实际开发中可能需要根据具体情况进行调整。