恢复微信小程序默认的顶部导航

471 阅读1分钟

又名

  • 页面内容怎么顶到最上面去了
  • 页面内容怎么冲到顶部导航那边去了
  • 微信小程序顶部安全区
  • 微信小程序自定义顶部导航

环境与效果

使用这个版本的开发者工具创建的ts项目

image.png

image.png

原因

image.png

image.png

"navigationStyle": "custom"是用来自定义顶部导航的,如果不需要自定义顶部导航,则应该设置为default

解决方案

改为default之后变黑了

image.png

image.png

调整顶部导航样式

app.json

{
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle": "black"
    }
}

image.png

效果

image.png

参考资料

为什么view标签顶着屏幕正上方显示? | 微信开放社区 (qq.com)