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();