MorJS 支付宝使用自定义顶部导航栏时

2024-01-20 11:32 更新
  • 问题表现: 在.json 文件中设置 "transparantTitle":"always" 时:
    • 微信端左上角的返回按钮和 home 按钮会无法显示,需要自定义
    • 支付宝仍可以获取到 statusBarHeighttitleBarHeight 的值,但微信获取到的 titleBarHeight 值为零
  • 解决方案:
    • 没有返回按钮的问题只能是前端手动添加
    • 微信侧可以通过 api:wx.getMenuButtonBoundingClientRect() 获取到胶囊位置,手动计算出 title 部分高度,参考代码逻辑如下 👇🏻
function getHeaderBar() {
  const systemInfo = getSystemInfoSync()
  if (systemInfo.app === 'wechat') {
    // 微信端
    // 低版本兼容,基础库 2.1.0 开始支持
    // eslint-disable-next-line no-undef
    if (wx.getMenuButtonBoundingClientRect) {
      // 该方法可使用
      // eslint-disable-next-line no-undef
      const { height, top, left } = wx.getMenuButtonBoundingClientRect()
      console.log('微信读取胶囊结果', { height, top, left })
      let { statusBarHeight } = systemInfo
      const extraHeight = 10
      statusBarHeight = top - statusBarHeight > 0 ? statusBarHeight : 0 // 华为p10状态栏是浮层
      const titleBarHeight = (top - statusBarHeight) * 2 + height + extraHeight
      return {
        height: statusBarHeight + titleBarHeight,
        titleBarHeight: titleBarHeight,
        statusBarHeight: statusBarHeight,
        buttonLeft: left,
        extraHeight
      }
    }
    // 低版本兼容
    return {
      height: 84,
      titleBarHeight: 40,
      statusBarHeight: 44
    }
  }

  // 非微信端
  const { titleBarHeight, statusBarHeight } = systemInfo
  return {
    height: titleBarHeight + statusBarHeight,
    titleBarHeight,
    statusBarHeight
  }
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号