技术分享

微信小程序隐藏头部导航条、标题栏的方法




关于微信小程序如何去掉顶部

  • 下面是我新建后做的例子:

  • 首先新建后结构如下:(图片是我自己添加的,用于顶部背景图)

  • 找到app.json文件

  • 官方原文档介绍:

  • 将default默认样式改成custom即可

  • "navigationStyle": "custom",  
  • 示例:

    未修改(可以看到顶部是默认的文字,背景我改成了粉色,下面自己加了图)



    修改后:(有没有很神奇,顶部默认的文字样式会将你添加的样式顶上去,就可以达到想要的效果了)



以下内容为扩展阅读内容:


微信小程序导航条

(小程序页面组成)


微信导航条的英文名称叫做“navigationBar”,是微信用于放置“返回按钮”、“页面标题”、“小程序菜单”的地方。在通过右上角菜单把微信小程序“显示在聊天顶部”之后,再回到微信小程序内部之后,返回键的右边还会出现一个关闭按钮,点击之后将会真正关闭小程序。附图如下。


显示在聊天顶部

(把小程序显示在聊天顶部)


显示在聊天顶部效果图

(显示在聊天顶部效果)


出现关闭按钮

(额外出现一个关闭按钮)


导航栏有助于统一设计风格,给用户一致的体验。一般而言返回按钮、页面标题、菜单是不可少的功能。


  • 返回按钮可以从小程序返回微信主界面,可以返回至上一个页面。
  • 页面标题可以告诉小程序用户他当前所处的位置。
  • 至于右上角菜单,英纵预计在不久的将来,小程序官方将会开放相关API接口,让开发者可以在菜单中加入自己的菜单,而不再限于小程序本身的菜单。


好了,今天的分享就到这里吧,祝大家2021年新年快乐,万事如意。