fix(pull-refresh): close #509

varletjs · Apr 24, 2022 · 311947a · 311947a
1 parent f797ee7
commit 311947a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
@@ -10,8 +10,8 @@
     <div :class="classes(n('control'), 'var-elevation--2', [isSuccess, n('control-success')])" :style="controlStyle">
       <var-icon
         :name="iconName"
-        :transition="200"
-        :class="classes(n('icon'), [refreshStatus === 'loading', n('animation')])"
+        :transition="ICON_TRANSITION"
+        :class="classes(n('icon'), [refreshStatus === 'loading' && iconHasChanged, n('animation')])"
         var-pull-refresh-cover
       />
     </div>
@@ -33,8 +33,7 @@ const { n, classes } = createNamespace('pull-refresh')
 
 const MAX_DISTANCE = 100
 const CONTROL_POSITION = -50
-
-let scroller: HTMLElement | Window
+const ICON_TRANSITION = 150
 
 export default defineComponent({
   name: 'VarPullRefresh',
@@ -43,12 +42,16 @@ export default defineComponent({
   },
   props,
   setup(props) {
+    let scroller: HTMLElement | Window
+    let changeResult: Promise<void>
+
     const freshNode: Ref<HTMLElement | null> = ref(null)
     const startPosition: Ref<number> = ref(0)
     const distance: Ref<number> = ref(CONTROL_POSITION)
     const iconName: Ref<string> = ref('arrow-down')
     const refreshStatus: Ref<RefreshStatus> = ref('default')
     const isEnd: Ref<boolean> = ref(false)
+    const iconHasChanged: Ref<boolean> = ref(true)
 
     const isTouchable = computed(
       () => refreshStatus.value !== 'loading' && refreshStatus.value !== 'success' && !props.disabled
@@ -63,6 +66,15 @@ export default defineComponent({
 
     const isSuccess = computed(() => refreshStatus.value === 'success')
 
+    const changeIcon = (): Promise<void> => {
+      return new Promise((resolve) => {
+        window.setTimeout(() => {
+          iconHasChanged.value = true
+          resolve()
+        }, ICON_TRANSITION)
+      })
+    }
+
     const touchStart = (event: TouchEvent) => {
       if (!isTouchable.value) return
 
@@ -79,15 +91,23 @@ export default defineComponent({
       const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + CONTROL_POSITION
 
       distance.value = moveDistance >= MAX_DISTANCE ? MAX_DISTANCE : moveDistance
-      iconName.value = distance.value >= MAX_DISTANCE * 0.2 ? 'refresh' : 'arrow-down'
+
+      if (distance.value >= MAX_DISTANCE * 0.2) {
+        iconHasChanged.value = false
+        iconName.value = 'refresh'
+        changeResult = changeIcon()
+      } else {
+        iconName.value = 'arrow-down'
+      }
     }
 
-    const touchEnd = () => {
+    const touchEnd = async () => {
       if (!isTouchable.value) return
 
       isEnd.value = true
 
       if (distance.value >= MAX_DISTANCE * 0.2) {
+        await changeResult
         refreshStatus.value = 'loading'
         distance.value = MAX_DISTANCE * 0.3
 
@@ -134,6 +154,8 @@ export default defineComponent({
     return {
       n,
       classes,
+      iconHasChanged,
+      ICON_TRANSITION,
       refreshStatus,
       freshNode,
       touchStart,

diff --git a/packages/varlet-ui/src/pull-refresh/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/pull-refresh/__tests__/__snapshots__/index.spec.js.snap
@@ -2,21 +2,21 @@
 
 exports[`test disabled prop 1`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div style=\\"height: 200px; width: 100%;\\"></div>
 </div>"
 `;
 
 exports[`test pull-refresh event 1`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div style=\\"height: 200px; width: 100%;\\"></div>
 </div>"
 `;
 
 exports[`test pullRefresh example 1`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div class=\\"var-cell var-cell--border\\">
     <!--v-if-->
     <div class=\\"var-cell__content\\">
@@ -102,21 +102,21 @@ exports[`test pullRefresh example 1`] = `
 
 exports[`test the different states during the drop-down process 1`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0); color: purple; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, -50px, 0px) translate(-50%, 0); color: purple; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div style=\\"height: 200px; width: 100%;\\"></div>
 </div>"
 `;
 
 exports[`test the different states during the drop-down process 2`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, 50px, 0px) translate(-50%, 0); color: purple; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-icon--shrinking var-pull-refresh__icon\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, 50px, 0px) translate(-50%, 0); color: purple; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-icon--shrinking var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div style=\\"height: 200px; width: 100%;\\"></div>
 </div>"
 `;
 
 exports[`test the different states during the drop-down process 3`] = `
 "<div class=\\"var-pull-refresh\\">
-  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, 30px, 0px) translate(-50%, 0); color: purple; transition: transform 300ms; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-icon--shrinking var-pull-refresh__icon var-pull-refresh__animation\\" style=\\"transition: transform 200ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
+  <div class=\\"var-pull-refresh__control var-elevation--2\\" style=\\"transform: translate3d(0px, 50px, 0px) translate(-50%, 0); color: purple; transition: transform 300ms; background: rgb(0, 0, 0);\\"><i class=\\"var-icon var-icon--set var-icon-arrow-down var-icon--shrinking var-pull-refresh__icon\\" style=\\"transition: transform 150ms;\\" var-pull-refresh-cover=\\"\\"></i></div>
   <div style=\\"height: 200px; width: 100%;\\"></div>
 </div>"
 `;
diff --git a/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js b/packages/varlet-ui/src/pull-refresh/__tests__/index.spec.js
@@ -108,7 +108,7 @@ test('test pull-refresh event', async () => {
   await trigger(el, 'touchmove', 0, 200)
   await trigger(el, 'touchend', 0, 150)
 
-  await delay(0)
+  await delay(200)
 
   expect(wrapper.vm.isRefresh).toBe(true)
   expect(refresh).toHaveBeenCalledTimes(1)