窗口导航栏不显示文字,内容与顶部导航栏重合等问题解决方案

2024-02-19  本文已影响0人  旺财叔

一、微信小程序中,内容与与顶部导航栏重合

原因:新建项目默认全局开启Skyline框架,不支持原生导航栏;而在toBbar中设置了自定义导航栏,即:"navigationStyle": "custom"。

当使用自定义导航栏时,会覆盖全局窗口中的内容,导致内容无法显示在导航栏的下方。

解决方案:在app.json文件中,

1)删除"window"中的属性:

"navigationStyle": "custom"

2)同时删除以下部分:

"renderer": "skyline",

  "rendererOptions": {

    "skyline": {

      "defaultDisplayBlock": true,

      "disableABTest": true,

      "sdkVersionBegin": "3.0.0",

      "sdkVersionEnd": "15.255.255"

    }

},

删除以上代码后,发现导航栏变黑色了,这是因为原生导航栏默认就是黑色的。


二、窗口导航栏不显示文字

原因:导航栏的文字颜色和背景颜色相同。

对"window"中的属性进行设置:

第一个设置背景颜色,第二个设置文字内容颜色,只有两种颜色,black 和white;

"navigationBarBackgroundColor": "#40E0D0",

    "navigationBarTextStyle": "black"

这两个属性可参考文档:

全局配置(app.json):https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

页面配置(page.json):https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

同时,背景颜色的类型为:HexColor,是十六进制的颜色。比如,红色为:#FF0000,黑色为#000000,白色为#FFFFFF。

其它颜色可以查相关文档。

本人比较喜欢用#40E0D0宝石绿。

上一篇 下一篇

猜你喜欢

热点阅读