Skip to content

perf(navbar): improve handling of menu button bounding client rect changes #3791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anlyyao merged 1 commit into from
Jul 28, 2025
Merged

perf(navbar): improve handling of menu button bounding client rect changes #3791

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions src/navbar/navbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,42 +146,38 @@ export default class Navbar extends SuperComponent {

onMenuButtonBoundingClientRectWeightChange() {
if (wx.onMenuButtonBoundingClientRectWeightChange) {
wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容
this.onMenuButtonBoundingClientRectWeightChangeCallback = (
res: WechatMiniprogram.OnMenuButtonBoundingClientRectWeightChangeListenerResult,
) => this.queryElements(res);

wx.onMenuButtonBoundingClientRectWeightChange(this.onMenuButtonBoundingClientRectWeightChangeCallback);
}
},

offMenuButtonBoundingClientRectWeightChange() {
if (wx.offMenuButtonBoundingClientRectWeightChange) {
wx.offMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res));
if (this.onMenuButtonBoundingClientRectWeightChangeCallback) {
wx.offMenuButtonBoundingClientRectWeightChange(this.onMenuButtonBoundingClientRectWeightChangeCallback);
}
},

/**
* 比较胶囊条和navbar内容，决定是否隐藏
* @param capsuleRect API返回值，胶囊条的位置信息
*/
queryElements(capsuleRect) {
queryElements(capsuleRect: WechatMiniprogram.OnMenuButtonBoundingClientRectWeightChangeListenerResult) {
Promise.all([
getRect(this, `.${this.data.classPrefix}__left`),
getRect(this, `.${this.data.classPrefix}__center`),
]).then(([leftRect, centerRect]) => {
// 部分安卓机型中（目前仅在Magic6/7中复现），仍存在精度问题，暂使用 Math.round() 取整规避
if (Math.round(leftRect.right) > capsuleRect.left) {
this.setData({
hideLeft: true,
hideCenter: true,
});
} else if (Math.round(centerRect.right) > capsuleRect.left) {
this.setData({
hideLeft: false,
hideCenter: true,
});
} else {
this.setData({
hideLeft: false,
hideCenter: false,
});
}
const leftRight = Math.round(leftRect.right);
const centerRight = Math.round(centerRect.right);
const capsuleLeft = capsuleRect.left;

this.setData({
hideLeft: leftRight > capsuleLeft,
hideCenter: leftRight > capsuleLeft ? true : centerRight > capsuleLeft,
});
});
},

Expand Down