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

相关推荐
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
说私域6 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往6 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
自由鬼7 小时前
Apache HTTP Server 2.4.49 的目录遍历漏洞CVE-2021-41773
网络协议·http·apache
lang201509287 小时前
Apache Ignite 索引(Indexes)定义和使用
apache·ignite
百川7 小时前
Apache文件解析漏洞
web安全·apache
weixin_lynhgworld9 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者10 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮12 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app