当前位置：首页 > news >正文

uni-app使用uview2自定义tabber

news 2025/7/1 6:14:43

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

1. 安装 uView 2.x

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

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

打开 HBuilder，点击顶部菜单栏的运行 → 运行到手机。
在插件市场搜索 uView，选择 uView 2.x 安装。
安装完成后，在 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. 完整效果预览

首页：
- 显示 "我是首页"。
- 底部 tabbar 显示 "首页" 为选中状态。
点击其他 tabbar 项：
- 会自动跳转到对应页面（如分类、购物车、我的）。

常见问题

tabbar 无法显示：
- 检查 pages.json 中是否正确配置了页面路径。
- 确保组件路径和文件名正确。
页面跳转失败：
- 检查 uni.switchTab 的路径是否正确（必须是 pages 中定义的路径）。
样式异常：
- 确保 uView 的样式文件已正确引入。
- 检查 u-tabbar 的 activeColor、safeAreaInsetBottom 等属性是否符合预期。