微信小程序：实现与胶囊对齐效果

通过以下设置可以取消小程序某个页面的导航栏

app.json

  "window": {
    ......,
    "navigationStyle": "default"
  },

page.json

{
  ......,
  "navigationStyle": "custom"
}

之后需要实现一个效果：标题栏与右侧胶囊对齐

page.js

    const { height, top } = wx.getMenuButtonBoundingClientRect();
    // 定义功能菜单行与胶囊对其
    this.setData({
      margintop: top,
      funcrowheight: height
    })

page.wxml

<view class="funcrow" style="height:{{funcrowheight}}px;margin-top:{{margintop}}px;">
......

效果如下：

和胶囊对齐效果.png