fix(pullrefresh): control node position

varletjs · Mar 22, 2023 · 06c2dad · 06c2dad
1 parent 9237379
commit 06c2dad
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
@@ -21,7 +21,7 @@ import VarIcon from '../icon'
 import { defineComponent, ref, computed, watch, type Ref } from 'vue'
 import { getParentScroller, getScrollTop, getTarget } from '../utils/elements'
 import { props, type RefreshStatus } from './props'
-import { toNumber } from '@varlet/shared'
+import { isString, toNumber } from '@varlet/shared'
 import { call, createNamespace } from '../utils/components'
 import { useEventListener, useMounted } from '@varlet/use'
 
@@ -43,7 +43,7 @@ export default defineComponent({
     const freshNode: Ref<HTMLElement | null> = ref(null)
     const controlNode: Ref<HTMLElement | null> = ref(null)
     const startPosition: Ref<number> = ref(0)
-    const distance: Ref<number> = ref(-999)
+    const distance: Ref<number | string> = ref('-125%')
     const iconName: Ref<string> = ref('arrow-down')
     const refreshStatus: Ref<RefreshStatus> = ref('default')
     const isEnd: Ref<boolean> = ref(false)
@@ -59,7 +59,9 @@ export default defineComponent({
     )
 
     const controlStyle = computed(() => ({
-      transform: `translate3d(0px, ${distance.value}px, 0px) translate(-50%, 0)`,
+      transform: `translate3d(0px, ${
+        isString(distance.value) ? distance.value : `${distance.value}px`
+      }, 0px) translate(-50%, 0)`,
       transition: isEnd.value ? `transform ${props.animationDuration}ms` : undefined,
       background: isSuccess.value ? props.successBgColor : props.bgColor,
       color: isSuccess.value ? props.successColor : props.color,
@@ -85,6 +87,11 @@ export default defineComponent({
     }
 
     const touchStart = (event: TouchEvent) => {
+      if (controlPosition.value === 0) {
+        const { width } = (controlNode.value as HTMLElement).getBoundingClientRect()
+        controlPosition.value = -(width + width * 0.25)
+      }
+
       startY = event.touches[0].clientY
       deltaY = 0
     }
@@ -150,13 +157,6 @@ export default defineComponent({
       }
     }
 
-    const setPosition = () => {
-      const { width } = (controlNode.value as HTMLElement).getBoundingClientRect()
-
-      distance.value = -(width + width * 0.25)
-      controlPosition.value = -(width + width * 0.25)
-    }
-
     const setScroller = () => {
       scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value!)
     }
@@ -184,10 +184,7 @@ export default defineComponent({
       }
     )
 
-    useMounted(() => {
-      setScroller()
-      setPosition()
-    })
+    useMounted(setScroller)
 
     useEventListener(freshNode, 'touchmove', touchMove)
 

diff --git a/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js b/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js
@@ -74,7 +74,7 @@ describe('test pull-refresh props', () => {
     await trigger(el, 'touchstart', 0, 0)
     await trigger(el, 'touchmove', 0, 50)
 
-    expect(control.attributes('style').includes('translate3d(0px, 0px, 0px)')).toBe(true)
+    expect(control.attributes('style').includes('translate3d(0px, -125%, 0px)')).toBe(true)
 
     wrapper.unmount()
   })