uni-app 支付宝小程序自定义顶部导航栏失效

前言

uni-app写的前端项目：一套仿奈雪の茶小程序的前端模板

“navigationStyle”: “custom”, 设置了后微信生效，支付宝不生效。

1.问题如下

2.解决

打开 pages.json , 找到自定义顶部导航栏的页面配置项,在 style 中添加如下代码

"mp-alipay": {
   "transparentTitle": "always",
   "titlePenetrate": "YES"
}

示例：

"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationStyle": "custom",
		"mp-alipay": {
			"transparentTitle": "always",
			"titlePenetrate": "YES"
		}
	}
}]

3.效果图

其他问题：

页面高度失效问题，可以在App.vue设置，#app { height: 100%; }

支付宝小程序：v-show 无效，使用v-if代替。

支付宝小程序：使用scss, ui组件作为父class，样式会失效。

支付宝小程序：button组件 type=“mini” 微信正常，支付宝异常，直接去掉。

支付宝小程序：picker Picker’s child must be an element: ，picker 不能直接写文字（< picker> 生日当天有惊喜</ picker>），需要用< text> 或者 < view>包裹（< picker> < text>生日当天有惊喜</ text> </ picker>）

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。