关于微信小程序自定义头部

在页面的json文件中配置头部的样式

"navigationStyle": "custom"

使用微信的apiwx.getMenuButtonBoundingClientRect()获取右上角的胶囊按钮的布局位置信息

根据获取到的信息调整自定义头部的位置

<view class="index-header" style="padding-top: {{pointobj.top}}px; width: {{pointobj.left}}px;">

详细代码如下：

Page({
  data: {
    pointobj: {} //胶囊按钮坐标对象
  },
  onLoad() {
    // 获取胶囊按钮定位
    let obj = wx.getMenuButtonBoundingClientRect()
    console.log(obj)
    this.setData({
      pointobj: obj
    })
  }
})

效果如下：