uni-app使用uview2自定义tabber

在 uni-app 中使用 uView 2.x 实现自定义 tabbar 需要以下几个步骤：安装 uView、配置 pages.json、创建自定义 tabbar 组件、隐藏原生 tabbar、绑定组件逻辑。以下是详细代码及过程。

---

1. 安装 uView 2.x

首先确保你已经安装了 uView 2.x。如果尚未安装，请通过 HBuilder 插件市场或手动引入方式安装。

安装步骤（HBuilder 插件市场）：

1. 打开 HBuilder，点击顶部菜单栏的 运行 → 运行到手机。
2. 在插件市场搜索 uView，选择 uView 2.x 安装。
3. 安装完成后，在 manifest.json 中启用 uView 框架。

---

2. 配置 pages.json

在 pages.json 中配置页面路径和全局样式，隐藏原生 tabbar。

示例 pages.json 配置：

{
  "globalStyle": {
    "navigationBarTitleText": "uView 自定义 tabbar",
    "navigationStyle": "custom" // 隐藏默认导航栏（可选）
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/category/category",
      "style": {
        "navigationBarTitleText": "分类"
      }
    },
    {
      "path": "pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ]
}

⚠️ 注意：pages.json 中的 tabBar 配置不需要手动定义，因为我们将使用自定义 tabbar 组件。

---

3. 创建自定义 tabbar 组件

在 components 目录下创建自定义 tabbar 组件，例如 components/CustomTabbar/CustomTabbar.vue。

自定义 tabbar 组件代码：

<template>
  <view class="custom-tabbar">
    <u-tabbar
      :value="current"
      @change="handleTabChange"
      :fixed="true"
      :safeAreaInsetBottom="true"
      activeColor="#dd524d"
    >
      <u-tabbar-item text="首页" icon="../../static/home.png"></u-tabbar-item>
      <u-tabbar-item text="分类" icon="../../static/category.png"></u-tabbar-item>
      <u-tabbar-item text="购物车" icon="../../static/cart.png"></u-tabbar-item>
      <u-tabbar-item text="我的" icon="../../static/user.png"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [
        { path: "pages/index/index" },
        { path: "pages/category/category" },
        { path: "pages/cart/cart" },
        { path: "pages/user/user" }
      ]
    };
  },
  methods: {
    handleTabChange(index) {
      uni.switchTab({
        url: `/${this.list[index].path}`
      });
    }
  }
};
</script>

<style scoped>
.custom-tabbar {
  width: 100%;
  height: 100%;
}
</style>

⚠️ 注意：

• 确保图标路径正确（static 目录下的图片）。
• u-tabbar 的 value 属性绑定当前选中项的索引，@change 事件触发页面跳转。

---

4. 在 App.vue 中隐藏原生 tabbar

在 App.vue 的 onLaunch 和 onShow 生命周期中隐藏原生 tabbar，避免冲突。

App.vue 代码：

<script>
export default {
  onLaunch() {
    uni.hideTabBarRedDot({ index: 0 }); // 隐藏原生 tabbar 的红点
    uni.hideTabBarBadge({ index: 0 });  // 隐藏原生 tabbar 的徽标
  },
  onShow() {
    uni.hideTabBarRedDot({ index: 0 });
    uni.hideTabBarBadge({ index: 0 });
  }
};
</script>

---

5. 在页面底部引入自定义 tabbar

在需要显示 tabbar 的页面底部引入自定义组件。例如，在 pages/index/index.vue 中：

页面代码（以首页为例）：

<template>
  <view>
    <!-- 页面内容 -->
    <text>我是首页</text>
    <!-- 引入自定义 tabbar -->
    <custom-tabbar :current="0" />
  </view>
</template>

<script>
import CustomTabbar from "@/components/CustomTabbar/CustomTabbar.vue";
export default {
  components: {
    CustomTabbar
  }
};
</script>

⚠️ 注意：

• :current="0" 表示当前页面对应的 tabbar 项索引（首页为第 0 个）。
• 所有需要显示 tabbar 的页面都需要手动引入 <custom-tabbar> 组件。

---

6. 使用 easycom 简化引入（可选）

如果使用 easycom 模式，可以省略手动引入组件的步骤。

配置 pages.json 的 easycom：

{
  "easycom": {
    "custom": {
      "custom-tabbar": "@/components/CustomTabbar/CustomTabbar.vue"
    }
  }
}

然后在页面中直接使用组件标签：

<template>
  <view>
    <text>我是首页</text>
    <custom-tabbar :current="0" />
  </view>
</template>

---

7. 完整效果预览

1. 首页：

   • 显示 "我是首页"。
   • 底部 tabbar 显示 "首页" 为选中状态。

2. 点击其他 tabbar 项：

   • 会自动跳转到对应页面（如分类、购物车、我的）。

---

常见问题

1. tabbar 无法显示：

   • 检查 pages.json 中是否正确配置了页面路径。
   • 确保组件路径和文件名正确。

2. 页面跳转失败：

   • 检查 uni.switchTab 的路径是否正确（必须是 pages 中定义的路径）。

3. 样式异常：

   • 确保 uView 的样式文件已正确引入。
   • 检查 u-tabbar 的 activeColor、safeAreaInsetBottom 等属性是否符合预期。

---

通过以上步骤，你可以使用 uView 2.x 实现一个功能完善的自定义 tabbar，并结合 pages.json 的配置实现页面跳转和样式管理。