fix(navbar): improve visibility logic for left and center elements

Author: betavs

src/navbar/navbar.less

@@ -34,7 +34,7 @@
   }
 
   &--visible {
-    display: '';
+    opacity: 1;
   }
 
   &--visible-animation {
@@ -50,7 +50,7 @@
   }
 
   &--hide {
-    display: none;
+    opacity: 0;
   }
 
   &__placeholder {

src/navbar/navbar.ts

@@ -72,9 +72,9 @@ export default class Navbar extends SuperComponent {
   };
 
   attached() {
+    this.onMenuButtonBoundingClientRectWeightChange();
     this.initStyle();
     this.getLeftRect();
-    this.onMenuButtonBoundingClientRectWeightChange();
   }
 
   detached() {
@@ -146,42 +146,44 @@ 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 capsuleRectLeft = capsuleRect.left;
+
+        const leftRectRight = Math.round(leftRect.right);
+        const centerRectRight = Math.round(centerRect.right);
+
+        const hideAll = leftRectRight > capsuleRectLeft;
+        const hideCenter = centerRectRight > capsuleRectLeft;
+
+        // eslint-disable-next-line
+        console.log(leftRectRight, capsuleRectLeft, centerRectRight);
+
+        this.setData({
+          hideLeft: hideAll || false,
+          hideCenter: hideAll || hideCenter,
+        });
       });
     },