大家好，我是一名立志做全栈工程师的程序猿，阿许。
本文章将帮助大家实现uniapp底部导航栏，如有失偏颇，请批评指正。
解决思路
我的解决思路主要有以下三种：
-
（自定义）封装成组件并搭配使用
VueRouter。通过router-link进行页面的跳转，从而实现页面的跳转。由于未采用此方法，这里只提供一种思路。
-
（自定义）在主页面中新建
main.js作为路由页面的载体，并将自定义tabBar也自定义在此。将tabBar响应时间绑定页面，当触发某一响应事件时，对标志量进行修改。再通过v-if、v-else-if、v-else进行加载页面。部分代码如下：
// 页面切换
<view class="content">
<view v-if="activeIndex === 0">
<home></home>
</view>
<view v-else-if="activeIndex === 1">
<personage></personage>
</view>
<view v-else>
<trolley></trolley>
</view>
</view>
// 自定义tabBar
<view class="tabBar">
<view v-for="(item, index) in tabBarItems" :key="index" :class="{active : activeIndex === index}" @click="navigateToAnother(index)">
<view>
<icon :class="item.icon" ></icon>
<text v-if="activeIndex === index">{{item.title}}</text>
</view>
</view>
</view>
这里不需要全局状态管理。
- （原生）配置
pages.json文件，设置tabBar从而实现导航栏。部分代码如下：
"tabBar": {
"color": "#000",
"selectedColor": "#1afa29",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/homeactive.png",
"text": "首页"
}, {
"pagePath": "pages/classify/classify",
"iconPath": "static/images/menu.png",
"selectedIconPath": "static/images/menuactive.png",
"text": "分类"
},
{
"pagePath": "pages/person/person",
"iconPath": "static/images/user.png",
"selectedIconPath": "static/images/useractive.png",
"text": "个人"
}
]
}
这里使用的图标是静态图片，大家也可替换为unicode。但与此同时，需要添加"iconfontSrc": "static/iconfonts/iconfont.ttf",定位unicode对应的图标。
所遇问题
一开始打算自定义底部导航栏，但是误解了底部导航栏的作用。认为其将会被多个页面调用，于是作为组件进行封装。
然后，遇到问题，当点击底部导航栏某一项时，跳转到其他页面，这里使用的跳转方式为uni.redirectTo。因为使用uni.navigateTo考虑到会堆栈，从而使得页面在跳转多次之后无法加载。而跳转到新的页面也需要加载此组件，而底部样式还是初始样式。（简而言之，就是底部导航栏组件重新加载，而页面已经跳转）
之后，就考虑如何统一底部导航栏的状态，引入vuex对底部导航栏的标志位进行全局状态管理。
最后，跳转到新的界面，底部导航栏组件总是需要重新加载。（变化明显）这里考虑通过动画进行过渡，但是由于时间成本，就不做考虑。于是采用了上述的第二种解决思路。
希望能帮助到大家！
