2018-11-22小程序自定义标题栏

2018-11-22  本文已影响0人  KingAmo

小程序自带的标题栏如果不满足我们的业务需求,该怎么自定义标题栏呢?
app.json文件下的window 字段里加上

        "navigationStyle": "custom"

就可以去掉默认的标题栏了。但是,这样所有的页面都要自定义标题栏了。目前小程序还不支持单个页面自定义标题栏


然后新建一个header组件作为自定义标题栏,在app.json中利用usingComponents字段全局引入这个组件,在每个页面最上面直接使用这个组件,就可以满足我们的自定义标题栏的目的了。

tips:

自定义标题栏的高度:wx.getSystemInfo,取到statusBarHeight作为自定义状态栏的高度

页面滑动如果把标题栏顶上去了,可以把标题栏以下的父view设置为position:fixed

自定义标题栏后,返回按钮的点击事件也可以自定义了,很好用

自定义标题栏后,web-view组件会把自定义的标题栏覆盖掉

12.27更新

小程序支持单个页面自定义标题栏了:链接

上一篇下一篇

猜你喜欢

热点阅读