Uniapp 是一个基于 Vue.js 的跨平台开发框架，可以快速构建多端应用，如微信小程序、H5、App等。其中，底部导航栏是常见的页面布局之一，本文将介绍如何自定义底部导航栏，并实现全页面引用跳转功能。
一、安装 uni-ui
Uniapp 提供了丰富的组件库 uni-ui，我们可以使用其中的 uni-tab-bar 组件来实现底部导航栏的布局。
首先，需要在 Uniapp 项目的根目录下执行以下命令安装 uni-ui：
npm install @dcloudio/uni-ui
然后，在 pages.json 文件中引入 uni-tab-bar 组件：
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
二、自定义底部导航栏
在 App.vue 文件中，我们可以自定义底部导航栏的样式和内容。以下是一个简单的示例：
<template>
<div>
<router-uni-tab-bar></router-uni-tab-bar> <!-- 底部导航栏组件引用 -->
</div>
</template>
<script>
export default {
data() {
return {
tabBar: {
color: '#8a8a8a',
selectedColor: '#007BFF',
backgroundColor: '#ffffff',
list: [
{
text: '首页',
pagePath: '/pages/home/home',
iconPath: '/static/home.png',
selectedIconPath: '/static/home-selected.png'
},
{
text: '我的',
pagePath: '/pages/mine/mine',
iconPath: '/static/mine.png',
selectedIconPath: '/static/mine-selected.png'
}
]
}
}
}
}
</script>
<style>
</style>
在 data 中定义了 tabBar 对象，包含底部导航栏的样式和内容。其中，list 数组表示导航栏的每个按钮，包含按钮的文本、跳转页面路径、图标路径等信息。
三、全页面引用跳转
在 Uniapp 中，可以使用 uni.switchTab 方法实现底部导航栏的全页面引用跳转功能。在需要跳转的页面中，通过以下方式调用 uni.switchTab：
uni.switchTab({
url: '/pages/home/home'
})
其中，url 参数指定了目标页面的路径。
四、进一步丰富内容
除了样式和跳转功能，你还可以进一步丰富底部导航栏的内容。比如，可以添加消息提醒、红点标记等功能，以增强用户体验。
结语
本文介绍了如何使用 uni-ui 组件库自定义底部导航栏，并实现全页面引用跳转功能。通过自定义底部导航栏，可以提升应用的界面美感和导航功能。希望本文对你有所帮助！
↓↓↓ 如果觉得本文对你有帮助，请点个赞吧！↓↓↓
本文来自极简博客，作者：心灵画师，转载请注明原文链接：Uniapp 底部导航栏自定义 tabBar 全端全页面引用跳转组件
