目 录CONTENT

文章目录

微信小程序~使用 `wx.getMenuButtonBoundingClientRect` 获取胶囊区域坐标-适配自定义 custom navigation style

Hello!你好!我是村望~!
2023-12-03 / 0 评论 / 0 点赞 / 312 阅读 / 297 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

wx.getMenuButtonBoundingClientRect文档

获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    ...
  }

这里的 menuButtonInfo 输出结果

{"width":87,"height":32,"left":281,"top":24,"right":368,"bottom":56}

【注意这些单位都是px

然后你就可以自定义上面的状态栏!胶囊区域了!

我自己的习惯是单独定义状态栏的样式和单独定义胶囊区域的样式!!这样分得清楚一点  🤣

  onLoad(options) {
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    const { top, height } = menuButtonInfo
    const topBarHeight = top // 用来放原本应该的状态栏的高度
    const customNavAreaHeight = height // 用来放原本应该的状态栏的高度
    this.setData({
      topBarHeight, customNavAreaHeight
    })
  },
<!-- 适配状态栏 -->
<view class="status" style="height: {{topBarHeight}}px"></view>

<!-- 胶囊区域 -->
<view class="customArea" style="height: {{customNavAreaHeight}}px;">
   <text>任务中心</text>
</view>

<!--其他.. 页面内容 ..-->

image-20231203200903364

Dec-03-2023 20-10-19

可以看到在不同尺寸设备的兼容性上也是OK的!

0

评论区