uni-app框架中如何集成为一个app 两个原生底部tabbar

在uni-app框架中集成两个原生底部Tabbar，可以通过配置pages.json文件和使用自定义组件的方式来实现。以下是一个简单的示例代码，展示如何在uni-app中配置两个原生底部Tabbar。

1. 配置pages.json

首先，在pages.json文件中配置页面和Tabbar项。假设我们有两个页面：home和settings，每个页面对应一个Tabbar项。

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "Home"
      }
    },
    {
      "path": "pages/settings/settings",
      "style": {
        "navigationBarTitleText": "Settings"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "Home",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/settings/settings",
        "text": "Settings",
        "iconPath": "static/tabbar/settings.png",
        "selectedIconPath": "static/tabbar/settings-active.png"
      }
    ]
  }
}

2. 创建页面组件

在pages/home/home.vue和pages/settings/settings.vue中创建对应的页面组件。这里以home.vue为例：

<template>
  <view class="content">
    <text>Home Page</text>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

settings.vue页面类似，只需更改显示的文本内容即可。

3. 图标资源

确保在static/tabbar/目录下放置了对应的图标文件，如home.png, home-active.png, settings.png, settings-active.png。

4. 运行项目

完成上述配置后，运行uni-app项目。在模拟器或真机上，你将看到底部有两个Tabbar项，分别对应home和settings页面。

以上代码展示了如何在uni-app框架中配置两个原生底部Tabbar项。这种方式利用了uni-app提供的原生Tabbar支持，无需额外编写复杂的原生代码，即可实现跨平台的Tabbar导航功能。