uniapp 支付宝小程序自定义导航栏

我是用的是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();