fix(PullDownRefresh): reset loading bar height

Tencent · Jun 20, 2023 · 0e49e4f · 0e49e4f
1 parent f6c548f
commit 0e49e4f
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 13 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/list/__test__/__snapshots__/demo.test.jsx.snap b/src/list/__test__/__snapshots__/demo.test.jsx.snap
@@ -146,7 +146,7 @@ exports[`List > List pullRefreshVue demo works fine 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 50px;"
+        style="transform: translateY(15px); height: 0px; max-height: 50px;"
       >
         <div
           class="t-pull-down-refresh__text"

diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 66px;"
+        style="transform: translateY(7px); height: 0px; max-height: 66px;"
       >
         <div
           class="t-pull-down-refresh__text"
@@ -312,7 +312,7 @@ exports[`PullDownRefresh > PullDownRefresh loadingTextsVue demo works fine 1`] =
           >
             <div
               class="t-pull-down-refresh__loading"
-              style="height: 70px;"
+              style="transform: translateY(15px); height: 0px; max-height: 70px;"
             >
               <div
                 class="t-pull-down-refresh__text"
@@ -346,7 +346,7 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
       >
         <div
           class="t-pull-down-refresh__loading"
-          style="height: 66px;"
+          style="transform: translateY(7px); height: 0px; max-height: 66px;"
         >
           <div
             class="t-pull-down-refresh__text"
@@ -644,7 +644,7 @@ exports[`PullDownRefresh > PullDownRefresh timeoutVue demo works fine 1`] = `
           >
             <div
               class="t-pull-down-refresh__loading"
-              style="height: 50px;"
+              style="transform: translateY(15px); height: 0px; max-height: 50px;"
             >
               <div
                 class="t-pull-down-refresh__text"

diff --git a/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/index.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`PullDownRefresh > :props > :others 1`] = `
     >
       <div
         class="t-pull-down-refresh__loading"
-        style="height: 50px;"
+        style="transform: translateY(15px); height: 0px; max-height: 50px;"
       >
         <div
           class="t-pull-down-refresh__text"

diff --git a/src/pull-down-refresh/__test__/index.test.jsx b/src/pull-down-refresh/__test__/index.test.jsx
@@ -13,10 +13,10 @@ describe('PullDownRefresh', () => {
     it(':loadingBarHeight', async () => {
       const wrapper = mount(<PullDownRefresh value={true} loadingBarHeight={30} />);
       const loadingBar = wrapper.find('.t-pull-down-refresh__loading');
-      expect(window.getComputedStyle(loadingBar.element).height).toBe(`${30}px`);
+      expect(window.getComputedStyle(loadingBar.element).getPropertyValue('max-height')).toBe(`${30}px`);
 
       await wrapper.setProps({ loadingBarHeight: '90px' });
-      expect(window.getComputedStyle(loadingBar.element).height).toBe(`${90}px`);
+      expect(window.getComputedStyle(loadingBar.element).getPropertyValue('max-height')).toBe(`${90}px`);
     });
 
     it(':others', async () => {

diff --git a/src/pull-down-refresh/pull-down-refresh.vue b/src/pull-down-refresh/pull-down-refresh.vue
@@ -27,7 +27,7 @@ import debounce from 'lodash/debounce';
 import isArray from 'lodash/isArray';
 
 import PullDownRefreshProps from './props';
-import { useEmitEvent, useVModel, convertUnit } from '../shared';
+import { useEmitEvent, useVModel, convertUnit, reconvertUnit } from '../shared';
 import config from '../config';
 import TLoading from '../loading';
 import { useTouch, isReachTop, easeDistance } from './useTouch';
@@ -64,6 +64,7 @@ export default defineComponent({
     const maxBar = ref(null);
     const { height: loadingBarHeight } = useElementSize(loadingBar);
     const { height: maxBarHeight } = useElementSize(maxBar);
+    const actualLoadingBarHeight = ref(0);
 
     watch(
       [loading, loadingBarHeight],
@@ -118,6 +119,7 @@ export default defineComponent({
       if (!isReachTop(e) || loading.value) return;
 
       const { deltaY } = touch;
+      actualLoadingBarHeight.value = deltaY.value;
       const nextDistance = easeDistance(deltaY.value, loadingBarHeight.value);
       // 下拉时，防止下拉整个页面
       if (deltaY.value > 0) {
@@ -174,9 +176,14 @@ export default defineComponent({
         transform: `translate3d(0, ${distance.value}px, 0)`,
       };
     });
-    const loadingBarStyles = computed(() => ({
-      height: convertUnit(props.loadingBarHeight),
-    }));
+    const heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
+    const loadingBarStyles = computed(() => {
+      return {
+        transform: `translateY(${heightDiff}px)`,
+        height: `${actualLoadingBarHeight.value}px`,
+        maxHeight: convertUnit(props.loadingBarHeight),
+      };
+    });
     const maxBarStyles = computed(() => ({
       height: convertUnit(props.maxBarHeight),
     }));

diff --git a/src/shared/util.ts b/src/shared/util.ts
@@ -62,3 +62,8 @@ export const convertUnit = (val: string | number | undefined) => {
   if (val == null) return 0;
   return isNumber(val) ? `${val}px` : val;
 };
+
+export const reconvertUnit = (val: string | number | undefined) => {
+  if (val == null) return 0;
+  return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
+};