我是用的是uniapp 的 uni-nav-bar 组件 根据项目需求配置即可
<uni-nav-bar v-if="title" :left-icon="leftIcon" :title="title" :statusBar="true" :fixed="true" @clickLeft="goBack":border="false" :backgroundColor="background" :color="color" :productNum="productNum">props: {title: {type: String,default: ''},leftIcon: {type: String,default: ''},router: {type: String,default: ''},backType: {type: Number,default: ''},productNum: {type: Number,default: 0}},goBack() {if (this.leftIcon) {uni.navigateBack();}}
导航栏组件
页面组件中使用
<!-- #ifdef MP-WEIXIN -->
<navBar :backType="1" title="我的"></navBar>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<navBar :backType="1" title="我的" leftIcon="no"></navBar>
<!-- #endif -->
pages.json
"path": "user/user",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "",
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "NO"
}
}
导航栏前面的返回按钮去除不了 可以修改颜色
// #ifdef MP-ALIPAY
my.setNavigationBar({
frontColor: '#000000',
backgroundColor: '#000000',
})
// #endif
同时还要注意当小程序页面栈深度为 1,且当前页面既非首页也非 tabBar 页面时,标题栏上默认会展示返回小程序首页按钮
隐藏按钮
my.hideBackHome();