需求分析
目前开发一套“同城跑腿平台”小程序，面向用户和骑手，需要两个不同的底部导航，uniapp原生导航不满足要求。所以需要自定义导航栏。
随着自定义导航卡完成，切换选项卡页面总是闪烁，在网上也没有搜到完整的解决方法，总不能完美解决。现在我有一个方法，目前完美解决页面闪烁问题，写出来分享。
自定义导航栏
创建导航栏vue文件
首先创建一个commonUserTabBar.vue，这里我创建在pages/common。
html部分：
<template>
<view class="tab-bar">
<view v-for="(tab, index) in tabs" :key="index" @click="switchTab(tab)">
<image :src="currentTab === tab.pagePath ? tab.selectedIconPath : tab.iconPath" mode="aspectFit"></image>
<text :class="currentTab === tab.pagePath ? 'active' : ''">{{ tab.text }}</text>
</view>
</view>
</template>
js代码：
<script>
export default {
props: {
currentTab: {
type: String,
required: true
}
},
computed: {
tabs() {
return [
{
pagePath: '/pages/commonUser/index',
iconPath: '/static/images/commonUserTabbar/home.png',
selectedIconPath: '/static/images/commonUserTabbar/home_.png',
text: '首页'
},
{
pagePath: '/pages/commonUser/order',
iconPath: '/static/images/commonUserTabbar/order.png',
selectedIconPath: '/static/images/commonUserTabbar/order_.png',
text: '订单'
},
{
pagePath: '/pages/index',
iconPath: '/static/images/commonUserTabbar/mine.png',
selectedIconPath: '/static/images/commonUserTabbar/mine_.png',
text: '我的'
}
];
}
},
methods: {
switchTab(tab) {
uni.reLaunch({
url: tab.pagePath
});
}
}
};
</script>
其中，currentTab作为父组件传值对象，表示当前选项卡。用 uni.reLaunch进行页面切换。
css样式：
<style>
.tab-bar {
justify-content: space-around;
align-items: center;
height: 120upx;
background-color: #f7f7f7;
border-top: 1px solid #e6e6e6;
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
display: flex;
justify-content: space-around;
padding-bottom: 30upx;
}
.tab-bar view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar image {
width: 25px;
height: 25px;
}
.tab-bar text {
font-size: 12px;
margin-top: 5px;
}
.tab-bar text.active {
font-weight: bold;
}
</style>
父组件引用
首先在main.js注册,
import commonUserTabBar from "@/pages/common/commonUserTabBar.vue"//路径根据你的文件修改
Vue.component('commonUserTabBar', commonUserTabBar)
父组件引用,传入当前页面路径。
<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
data() {
return {
//当前选项卡
currentTab:'/pages/commonUser/index',
}
},
避免导航栏遮盖内容
在前面我们定义了导航栏高度，所以在正文我们需要定义一个padding-bottom;
.tab-bar {
...
height: 120upx;
}
为了方便全局引用，我将样式定义在app.vue，笔者可根据需求和实际自行定义。
.common-user-p-d-120upx{
// 设置的120upx是和底部导航栏的高度保持一致，页面的内容就不会被底部导航遮挡住啦
padding-bottom: 120upx;
}
最后效果：
<view class="common-user-p-d-120upx">
...
<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
</view>
优化页面闪烁（custom":true）
上文写到，使用 uni.reLaunch切换页面，但是每次切换选项卡时页面都会闪烁，所以我们需要使用uniapp原生的switchTab来切换。
就是在pages.json里设置原生tabbar， 在页面运行的时候 ，将原生tabbar隐藏 进而解决闪烁。其实就是用自定义tabbar外观 用原生tabbar跳转。
说句题外话，HBuilder X真的太烂了，总是有小bug或者编译丢失，搞得以为代码写错，蛮坑蛮浪费时间的。
说回这里，在网上检索，大家都是使用原生tabbar，然后隐藏官方的tabbar，等于是借路。但是这个也有一个弊端。就是每次第一次加载，底部会闪烁两个tabbar，一个你自定义的，一个原生的。而且你光在app.vue全局隐藏还不够，还需要在你第一个显示的页面里隐藏一下才行，有点奇怪。
onLaunch() {
//隐藏官方的tabBar
uni.hideTabBar()
}
这里我用"custom":true,来隐藏，从而解决闪烁问题。
“tabBar"中的"custom”: true 表示你想要自定义底部导航栏的样式和内容，而不是使用uni-app默认的底部导航栏。这样，你可以自由地设计底部导航栏的外观和功能，包括图标、文本、颜色等。这样uniapp就不会渲染原生tabbar了，所以也就不会导航栏闪烁了。
pages.json文件，将上面自定义的tabbar路径添加进list。
"tabBar": {
...
"custom":true,//隐藏官方选项卡
"list": [ {
"pagePath": "pages/commonUser/order",
"iconPath": "static/images/commonUserTabbar/order.png",
"selectedIconPath": "/static/images/commonUserTabbar/order_.png",
"text": "订单"
}, {
"pagePath": "pages/commonUser/index",
"iconPath": "static/images/commonUserTabbar/home.png",
"selectedIconPath": "/static/images/commonUserTabbar/home_.png",
"text": "首页"
}
]
},
然后将页面切换方法换成uni.switchTab
switchTab(tab) {
uni.switchTab({
url: tab.pagePath
});
}
源码截图：
说明
如果本项目对您有帮助，欢迎 “点赞，关注” 支持一下 谢谢~文章来源：https://www.toymoban.com/news/detail-763270.html
源码获取关注公众号「码农园区」，回复 【uniapp源码】
文章来源地址https://www.toymoban.com/news/detail-763270.html
到了这里，关于微信小程序、uniapp自定义底部导航栏（附源码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
