fix(navbar): px to rpx conversion error (#2626)

* fix(navbar): px to rpx conversion error * test(navbar): px to rpx conversion error
Tencent · Mar 7, 2024 · 8688187 · 8688187
1 parent 6f7849c
commit 8688187
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -40,7 +40,7 @@ exports[`navbar :base 2`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide-animation class t-class"
-      style="--td-navbar-padding-top:40rpx; --td-navbar-right:188rpx; --td-navbar-capsule-height: 64rpx; --td-navbar-capsule-width: 174rpx; --td-navbar-height: 188rpx;"
+      style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -75,7 +75,7 @@ exports[`navbar :base 3`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--hide class t-class"
-      style="--td-navbar-padding-top:40rpx; --td-navbar-right:188rpx; --td-navbar-capsule-height: 64rpx; --td-navbar-capsule-width: 174rpx; --td-navbar-height: 188rpx;"
+      style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -110,7 +110,7 @@ exports[`navbar :fixed 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style="--td-navbar-padding-top:40rpx; --td-navbar-right:188rpx; --td-navbar-capsule-height: 64rpx; --td-navbar-capsule-width: 174rpx; --td-navbar-height: 188rpx;"
+      style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 170rpx; --td-navbar-capsule-height: 58rpx; --td-navbar-capsule-width: 158rpx; --td-navbar-height: 170rpx;"
     >
       <wx-view
         class="t-navbar__placeholder"
@@ -145,7 +145,7 @@ exports[`navbar :menu button 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed  class t-class"
-      style="--td-navbar-padding-top:40rpx; --td-navbar-right:856rpx; --td-navbar-capsule-height: 20rpx; --td-navbar-capsule-width: 80rpx; --td-navbar-height: -20rpx;"
+      style="--td-navbar-padding-top: 36rpx; --td-navbar-right: 775rpx; --td-navbar-capsule-height: 18rpx; --td-navbar-capsule-width: 72rpx; --td-navbar-height: -18rpx;"
     >
       <wx-view
         class="t-navbar__placeholder"

diff --git a/src/navbar/navbar.ts b/src/navbar/navbar.ts
@@ -73,15 +73,16 @@ export default class Navbar extends SuperComponent {
     wx.getSystemInfo({
       success: (res) => {
         const boxStyleList = [];
-        const { statusBarHeight } = wx.getSystemInfoSync();
+        const { windowWidth, statusBarHeight } = wx.getSystemInfoSync();
+        const px2rpx = (v: number) => Math.round((v * 750) / (windowWidth >= 750 ? 750 / 2 : windowWidth));
 
-        boxStyleList.push(`--td-navbar-padding-top:${statusBarHeight * 2}rpx`);
+        boxStyleList.push(`--td-navbar-padding-top: ${px2rpx(statusBarHeight)}rpx`);
         if (rect && res?.windowWidth) {
-          boxStyleList.push(`--td-navbar-right:${(res.windowWidth - rect.left) * 2}rpx`); // 导航栏右侧小程序胶囊按钮宽度
+          boxStyleList.push(`--td-navbar-right: ${px2rpx(res.windowWidth - rect.left)}rpx`); // 导航栏右侧小程序胶囊按钮宽度
         }
-        boxStyleList.push(`--td-navbar-capsule-height: ${rect.height * 2}rpx`); // 胶囊高度
-        boxStyleList.push(`--td-navbar-capsule-width: ${rect.width * 2}rpx`); // 胶囊宽度
-        boxStyleList.push(`--td-navbar-height: ${((rect.top - statusBarHeight) * 2 + rect.height) * 2}rpx`);
+        boxStyleList.push(`--td-navbar-capsule-height: ${px2rpx(rect.height)}rpx`); // 胶囊高度
+        boxStyleList.push(`--td-navbar-capsule-width: ${px2rpx(rect.width)}rpx`); // 胶囊宽度
+        boxStyleList.push(`--td-navbar-height: ${px2rpx((rect.top - statusBarHeight) * 2 + rect.height)}rpx`);
         this.setData({
           boxStyle: `${boxStyleList.join('; ')}`,
         });