小程序自定义标题栏--胶囊

修改app.json或者页面内的json文件

修改app.json可以全局生效

//全局生效
"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "navbar": "/components/navbar/index" 
}

在页面的json文件中配置

//单个页面生效
  "usingComponents": {},
  "navigationStyle": "custom"

代码

新建component

使用wx.getMenuButtonBoundingClientRect()获取右上角胶囊位置信息。
关键问题在于自定义胶囊的上、下和左边距
需要结合wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。
具体代码有空再贴