"navigationStyle": "custom"

涉及知识点

获取右上角胶囊的布局

• wx.getMenuButtonBoundingClientRect()：https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html

获取页面上的节点信息

• wx.createSelectorQuery()：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

wxml部分

<view id="top-layout" class="top-layout">
  <view style="margin-top: {{clientRectTop}}px;padding-right: {{clientRectWidth}}px;">
    <search-bar bind:search="search" align="center" />
  </view>
</view>
<view class="app-content" style="margin-top: {{topLayoutH}}px;">
  文本内容
</view>

js部分

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    //获取右上角胶囊布局信息
    const rect = wx.getMenuButtonBoundingClientRect()
    console.log(rect);
    this.setData({
      clientRectTop: rect.top,
      clientRectBottom: (rect.bottom + 10), //10补偿余量
      clientRectWidth: (rect.width + 12), //12补偿间隙
      clientRectHeight: (rect.height)
    })
    // 获取页面节点布局
    const query = wx.createSelectorQuery()
    // 获取头部 id="top-layout" 的布局信息
    query.select('#top-layout').boundingClientRect()
    query.exec((res) => {
      console.log(res);
      this.setData({
        topLayoutH: res[0].height
      })
    })
  }