From cbc7d0df6ccd15a0c1057c85668048cb330fde30 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 27 Nov 2024 12:42:12 +0800 Subject: [PATCH] chore: optimize --- .../__test__/__snapshots__/index.test.js.snap | 10 +- src/navbar/navbar.less | 4 +- src/navbar/navbar.ts | 133 +++++++++++------- 3 files changed, 91 insertions(+), 56 deletions(-) diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap index c82e89ca5..f0192696e 100644 --- a/src/navbar/__test__/__snapshots__/index.test.js.snap +++ b/src/navbar/__test__/__snapshots__/index.test.js.snap @@ -5,7 +5,7 @@ exports[`navbar :base 1`] = ` { - if (rect2.right !== right) { - const boxStyleList2 = boxStyleList.filter((item) => !item.startsWith('--td-navbar-center-left')); - const maxSpacing2 = Math.max(rect2.right, systemInfo.windowWidth - rect.left); - boxStyleList2.push(`--td-navbar-center-left: ${maxSpacing2}px`); - this.setData({ - boxStyle: `${boxStyleList2.join('; ')}`, - }); - } - }); - } - boxStyleList.push(`--td-navbar-capsule-height: ${rect.height}px`); // 胶囊高度 - boxStyleList.push(`--td-navbar-capsule-width: ${rect.width}px`); // 胶囊宽度 - boxStyleList.push(`--td-navbar-height: ${(rect.top - systemInfo.statusBarHeight) * 2 + rect.height}px`); - this.setData({ - boxStyle: `${boxStyleList.join('; ')}`, - }); - // @ts-ignore - if (wx.onMenuButtonBoundingClientRectWeightChange) { - // fixme: 规避单元测试无法识别新api，更新后可删除 - // @ts-ignore - wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容 - } + attached() { + this.initStyle(); + this.getLeftRect(); + this.onMenuButtonBoundingClientRectWeightChange(); } detached() { - // @ts-ignore - if (wx.offMenuButtonBoundingClientRectWeightChange) { - // fixme: 规避单元测试无法识别新api，更新后可删除 - // @ts-ignore - wx.offMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); - } + this.offMenuButtonBoundingClientRectWeightChange(); } methods = { + initStyle() { + this.getMenuRect(); + + const { _menuRect, _leftRect } = this.data; + + if (!_menuRect || !_leftRect || !systemInfo) return; + + const _boxStyleList = {}; + _boxStyleList['--td-navbar-padding-top'] = `${systemInfo.statusBarHeight}px`; + _boxStyleList['--td-navbar-right'] = `${systemInfo.windowWidth - _menuRect.left}px`; // 导航栏右侧小程序胶囊按钮宽度 + _boxStyleList['--td-navbar-left-max-width'] = `${_menuRect.left}px`; // 左侧内容最大宽度 + _boxStyleList['--td-navbar-capsule-height'] = `${_menuRect.height}px`; // 胶囊高度 + _boxStyleList['--td-navbar-capsule-width'] = `${_menuRect.width}px`; // 胶囊宽度 + _boxStyleList['--td-navbar-height'] = `${(_menuRect.top - systemInfo.statusBarHeight) * 2 + _menuRect.height}px`; + + this.calcCenterStyle(_leftRect, _menuRect, _boxStyleList); + }, + + calcCenterStyle( + leftRect: WechatMiniprogram.BoundingClientRectResult, + menuRect: WechatMiniprogram.BoundingClientRectResult, + defaultStyle: object, + ) { + const maxSpacing = Math.max(leftRect.right, systemInfo.windowWidth - menuRect.left); + const _boxStyleObj = {}; + + _boxStyleObj['--td-navbar-center-left'] = `${maxSpacing}px`; // 标题左侧距离 + _boxStyleObj['--td-navbar-center-width'] = `${Math.max(menuRect.left - maxSpacing, 0)}px`; // 标题宽度 + + const boxStyle = Object.entries({ ...defaultStyle, ..._boxStyleObj }) + .map(([k, v]) => `${k}: ${v}`) + .join('; '); + + this.setData({ + boxStyle, + _boxStyle: { ...defaultStyle, ..._boxStyleObj }, + }); + }, + + getLeftRect() { + getRect(this, `.${name}__left`).then((res) => { + if (res.right > this.data._leftRect.right) { + this.calcCenterStyle(res, this.data._menuRect, this.data._boxStyle); + } + }); + }, + + getMenuRect() { + // 场景值为1177（视频号直播间）和1175 （视频号profile页）时，小程序禁用了 wx.getMenuButtonBoundingClientRect + if (wx.getMenuButtonBoundingClientRect) { + const rect = wx.getMenuButtonBoundingClientRect(); + this.setData({ + _menuRect: rect, + _leftRect: { + right: systemInfo.windowWidth - rect.left, + }, + }); + } + }, + + onMenuButtonBoundingClientRectWeightChange() { + if (wx.onMenuButtonBoundingClientRectWeightChange) { + wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容 + } + }, + + offMenuButtonBoundingClientRectWeightChange() { + if (wx.offMenuButtonBoundingClientRectWeightChange) { + wx.offMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); + } + }, + /** * 比较胶囊条和navbar内容，决定是否隐藏 * @param capsuleRect API返回值，胶囊条的位置信息 @@ -129,12 +163,13 @@ export default class Navbar extends SuperComponent { getRect(this, `.${this.data.classPrefix}__left`), getRect(this, `.${this.data.classPrefix}__center`), ]).then(([leftRect, centerRect]) => { - if (leftRect.right > capsuleRect.left) { + // 部分安卓机型中（目前仅在Magic6/7中复现），仍存在精度问题，暂使用 Math.round() 取整规避 + if (Math.round(leftRect.right) > capsuleRect.left) { this.setData({ hideLeft: true, hideCenter: true, }); - } else if (centerRect.right > capsuleRect.left) { + } else if (Math.round(centerRect.right) > capsuleRect.left) { this.setData({ hideLeft: false, hideCenter: true,