From 40fcb2e2e5b7690605a0f6c47e81c9d4444be695 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Thu, 28 Jan 2021 16:31:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui/swipe):=20=E4=BF=AE=E5=A4=8D=E4=BA=86tou?=
 =?UTF-8?q?ching=E7=8A=B6=E6=80=81=E4=B8=8Bautoplay=E6=B2=A1=E7=A6=81?=
 =?UTF-8?q?=E6=AD=A2=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/ui
---
 packages/varlet-ui/src/swipe/Swipe.vue        | 650 +++++++++---------
 .../varlet-ui/src/swipe/example/index.vue     |  64 +-
 2 files changed, 358 insertions(+), 356 deletions(-)

diff --git a/packages/varlet-ui/src/swipe/Swipe.vue b/packages/varlet-ui/src/swipe/Swipe.vue
index ba146567df8..766a7a98543 100644
--- a/packages/varlet-ui/src/swipe/Swipe.vue
+++ b/packages/varlet-ui/src/swipe/Swipe.vue
@@ -1,39 +1,39 @@
 <template>
-	<div class="var-swipe" ref="swipeEl" v-bind="$attrs">
-		<div
-			class="var-swipe__track"
-			:class="[vertical ? 'var-swipe--vertical' : null]"
-			:style="{
-				width: !vertical ? `${trackSize}px` : null,
-				height: vertical ? `${trackSize}px` : null,
-				transform: `translate${vertical ? 'Y' : 'X'}(${translate}px)`,
-				transitionDuration: lockDuration ? `0ms` : `${duration}ms`,
-			}"
-			@touchstart="handleTouchstart"
-			@touchmove="handleTouchmove"
-			@touchend="handleTouchend"
-		>
-			<slot />
-		</div>
-
-		<div
-			class="var-swipe__indicators"
-			:class="[vertical ? 'var-swipe--indicators-vertical' : null]"
-			v-if="indicator || length"
-		>
-			<div
-				class="var-swipe__indicator"
-				:class="[
-					index === idx ? 'var-swipe--indicator-active' : null,
-					vertical ? 'var-swipe--indicator-vertical' : null,
-				]"
-				:style="{ background: indicatorColor }"
-				v-for="(l, idx) in length"
-				:key="l"
-				@click="to(idx)"
-			></div>
-		</div>
-	</div>
+  <div class="var-swipe" ref="swipeEl" v-bind="$attrs">
+    <div
+      class="var-swipe__track"
+      :class="[vertical ? 'var-swipe--vertical' : null]"
+      :style="{
+        width: !vertical ? `${trackSize}px` : null,
+        height: vertical ? `${trackSize}px` : null,
+        transform: `translate${vertical ? 'Y' : 'X'}(${translate}px)`,
+        transitionDuration: lockDuration ? `0ms` : `${duration}ms`,
+      }"
+      @touchstart="handleTouchstart"
+      @touchmove="handleTouchmove"
+      @touchend="handleTouchend"
+    >
+      <slot />
+    </div>
+
+    <div
+      class="var-swipe__indicators"
+      :class="[vertical ? 'var-swipe--indicators-vertical' : null]"
+      v-if="indicator || length"
+    >
+      <div
+        class="var-swipe__indicator"
+        :class="[
+          index === idx ? 'var-swipe--indicator-active' : null,
+          vertical ? 'var-swipe--indicator-vertical' : null,
+        ]"
+        :style="{ background: indicatorColor }"
+        v-for="(l, idx) in length"
+        :key="l"
+        @click="to(idx)"
+      ></div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,295 +49,297 @@ const SWIPE_DELAY = 250
 const SWIPE_DISTANCE = 20
 
 export default defineComponent({
-	name: 'VarSwipe',
-	inheritAttrs: false,
-	props,
-	setup(props) {
-		const { bindChildren: bindSwipeItem, childProviders: swipeItemProviders } = useChildren<
-			SwipeProvider,
-			SwipeItemProvider
-		>(SWIPE_BIND_SWIPE_ITEM_KEY)
-		const { length } = useAtChildrenCounter(SWIPE_COUNT_SWIPE_ITEM_KEY)
-
-		const swipeEl: Ref<HTMLElement | null> = ref(null)
-		const size: Ref<number> = ref(0)
-		const vertical: ComputedRef<boolean> = computed(() => props.vertical)
-		const trackSize: Ref<number> = ref(0)
-		const translate: Ref<number> = ref(0)
-		const lockDuration: Ref<boolean> = ref(false)
-		const index: Ref<number> = ref(0)
-		let initial = false
-		let touching = false
-		let timer = -1
-		let startX: number
-		let startY: number
-		let startTime: number
-		let prevX: number | undefined
-		let prevY: number | undefined
-
-		const findSwipeItemProvider = (idx: number) =>
-			swipeItemProviders.find(({ index }) => index.value === idx) as SwipeItemProvider
-
-		const dispatchBorrower = () => {
-			if (!props.loop) {
-				return
-			}
-			// track越左边界
-			if (translate.value >= 0) {
-				findSwipeItemProvider(length.value - 1).setTranslate(-trackSize.value)
-			}
-			// track越右边界
-			if (translate.value <= -(trackSize.value - size.value)) {
-				findSwipeItemProvider(0).setTranslate(trackSize.value)
-			}
-			// track没越界
-			if (translate.value > -(trackSize.value - size.value) && translate.value < 0) {
-				findSwipeItemProvider(length.value - 1).setTranslate(0)
-				findSwipeItemProvider(0).setTranslate(0)
-			}
-		}
-
-		const getSwipeIndex = (targetSwipeIndex?: number) => {
-			const swipeIndex = isNumber(targetSwipeIndex)
-				? targetSwipeIndex
-				: Math.floor((translate.value - size.value / 2) / -size.value)
-
-			if (swipeIndex <= -1) {
-				return props.loop ? -1 : 0
-			}
-			if (swipeIndex >= length.value) {
-				return props.loop ? length.value : length.value - 1
-			}
-
-			return swipeIndex
-		}
-
-		const swipeIndexToIndex = (swipeIndex: number) => {
-			if (swipeIndex === -1) {
-				return props.loop ? length.value - 1 : 0
-			}
-			if (swipeIndex === length.value) {
-				return props.loop ? 0 : length.value - 1
-			}
-
-			return swipeIndex
-		}
-
-		const boundaryIndex = (index: number) => {
-			if (index < 0) {
-				return 0
-			}
-			if (index > length.value - 1) {
-				return length.value - 1
-			}
-
-			return index
-		}
-
-		const resetPosition = (fn?: () => void) => {
-			const exceedLeft = translate.value >= size.value
-			const exceedRight = translate.value <= -trackSize.value
-			const leftTranslate = 0
-			const rightTranslate = -(trackSize.value - size.value)
-
-			lockDuration.value = true
-			// 检测是否有越界情况 越界修正
-			if (exceedLeft || exceedRight) {
-				lockDuration.value = true
-				translate.value = exceedRight ? leftTranslate : rightTranslate
-				findSwipeItemProvider(0).setTranslate(0)
-				findSwipeItemProvider(length.value - 1).setTranslate(0)
-			}
-
-			nextTickFrame(() => {
-				lockDuration.value = false
-				fn?.()
-			})
-		}
-
-		const initialIndex = () => {
-			if (!initial) {
-				lockDuration.value = true
-				index.value = boundaryIndex(props.initialIndex)
-				translate.value = index.value * -size.value
-				initial = true
-				nextTickFrame(() => {
-					lockDuration.value = false
-				})
-			}
-		}
-
-		const next = () => {
-			if (length.value <= 1) {
-				return
-			}
-
-			resetPosition(() => {
-				if (index.value === length.value - 1) {
-					if (props.loop) {
-						index.value = 0
-						findSwipeItemProvider(0).setTranslate(trackSize.value)
-						translate.value = length.value * -size.value
-					}
-				} else {
-					index.value++
-					translate.value = index.value * -size.value
-				}
-
-				props.onChange?.(index.value)
-			})
-		}
-
-		const prev = () => {
-			if (length.value <= 1) {
-				return
-			}
-
-			resetPosition(() => {
-				if (index.value === 0) {
-					if (props.loop) {
-						index.value = length.value - 1
-						findSwipeItemProvider(length.value - 1).setTranslate(-trackSize.value)
-						translate.value = size.value
-					}
-				} else {
-					index.value--
-					translate.value = index.value * -size.value
-				}
-
-				props.onChange?.(index.value)
-			})
-		}
-
-		const to = (idx: number) => {
-			if (length.value <= 1 || idx === index.value) {
-				return
-			}
-
-			idx = idx < 0 ? 0 : idx
-			idx = idx >= length.value ? length.value : idx
-
-			const task = idx > index.value ? next : prev
-
-			Array.from({ length: Math.abs(idx - index.value) }).forEach(task)
-		}
-
-		const startAutoplay = () => {
-			if (!props.autoplay || length.value <= 1) {
-				return
-			}
-
-			stopAutoplay()
-
-			timer = window.setTimeout(() => {
-				next()
-				startAutoplay()
-			}, Number(props.autoplay))
-		}
-
-		const stopAutoplay = () => {
-			timer && clearInterval(timer)
-		}
-
-		const handleTouchstart = (event: TouchEvent) => {
-			if (length.value <= 1 || !props.touchable) {
-				return
-			}
-
-			const { clientX, clientY } = event.touches[0]
-			startX = clientX
-			startY = clientY
-			startTime = performance.now()
-			touching = true
-
-			resetPosition(() => {
-				lockDuration.value = true
-			})
-		}
-
-		const handleTouchmove = (event: TouchEvent) => {
-			if (!touching) {
-				return
-			}
-
-			const { clientX, clientY } = event.touches[0]
-			const moveX = prevX !== undefined ? clientX - prevX : 0
-			const moveY = prevY !== undefined ? clientY - prevY : 0
-			prevX = clientX
-			prevY = clientY
-
-			translate.value += props.vertical ? moveY : moveX
-
-			dispatchBorrower()
-		}
-
-		const handleTouchend = () => {
-			if (!touching) {
-				return
-			}
-
-			const positive = props.vertical ? (prevY as number) < startY : (prevX as number) < startX
-			const distance = props.vertical ? Math.abs(startY - (prevY as number)) : Math.abs(startX - (prevX as number))
-			const quickSwiping = performance.now() - startTime <= SWIPE_DELAY && distance >= SWIPE_DISTANCE
-			const swipeIndex = quickSwiping
-				? positive
-					? getSwipeIndex(index.value + 1)
-					: getSwipeIndex(index.value - 1)
-				: getSwipeIndex()
-
-			touching = false
-			lockDuration.value = false
-			prevX = undefined
-			prevY = undefined
-
-			translate.value = swipeIndex * -size.value
-			index.value = swipeIndexToIndex(swipeIndex)
-
-			props.onChange?.(index.value)
-		}
-
-		watch(
-			() => length.value,
-			() => {
-				initialIndex()
-				startAutoplay()
-				trackSize.value = size.value * length.value
-			}
-		)
-
-		watch(
-			() => swipeEl.value,
-			() => {
-				size.value = props.vertical
-					? (swipeEl.value as HTMLElement).offsetHeight
-					: (swipeEl.value as HTMLElement).offsetWidth
-			}
-		)
-
-		onUnmounted(stopAutoplay)
-
-		const swipeProvider: SwipeProvider = {
-			size,
-			vertical,
-		}
-
-		bindSwipeItem(swipeProvider)
-
-		return {
-			length,
-			index,
-			swipeEl,
-			trackSize,
-			translate,
-			lockDuration,
-			handleTouchstart,
-			handleTouchmove,
-			handleTouchend,
-			next,
-			prev,
-			to,
-		}
-	},
+  name: 'VarSwipe',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const { bindChildren: bindSwipeItem, childProviders: swipeItemProviders } = useChildren<
+      SwipeProvider,
+      SwipeItemProvider
+    >(SWIPE_BIND_SWIPE_ITEM_KEY)
+    const { length } = useAtChildrenCounter(SWIPE_COUNT_SWIPE_ITEM_KEY)
+
+    const swipeEl: Ref<HTMLElement | null> = ref(null)
+    const size: Ref<number> = ref(0)
+    const vertical: ComputedRef<boolean> = computed(() => props.vertical)
+    const trackSize: Ref<number> = ref(0)
+    const translate: Ref<number> = ref(0)
+    const lockDuration: Ref<boolean> = ref(false)
+    const index: Ref<number> = ref(0)
+    let initial = false
+    let touching = false
+    let timer = -1
+    let startX: number
+    let startY: number
+    let startTime: number
+    let prevX: number | undefined
+    let prevY: number | undefined
+
+    const findSwipeItemProvider = (idx: number) =>
+      swipeItemProviders.find(({ index }) => index.value === idx) as SwipeItemProvider
+
+    const dispatchBorrower = () => {
+      if (!props.loop) {
+        return
+      }
+      // track越左边界
+      if (translate.value >= 0) {
+        findSwipeItemProvider(length.value - 1).setTranslate(-trackSize.value)
+      }
+      // track越右边界
+      if (translate.value <= -(trackSize.value - size.value)) {
+        findSwipeItemProvider(0).setTranslate(trackSize.value)
+      }
+      // track没越界
+      if (translate.value > -(trackSize.value - size.value) && translate.value < 0) {
+        findSwipeItemProvider(length.value - 1).setTranslate(0)
+        findSwipeItemProvider(0).setTranslate(0)
+      }
+    }
+
+    const getSwipeIndex = (targetSwipeIndex?: number) => {
+      const swipeIndex = isNumber(targetSwipeIndex)
+        ? targetSwipeIndex
+        : Math.floor((translate.value - size.value / 2) / -size.value)
+
+      if (swipeIndex <= -1) {
+        return props.loop ? -1 : 0
+      }
+      if (swipeIndex >= length.value) {
+        return props.loop ? length.value : length.value - 1
+      }
+
+      return swipeIndex
+    }
+
+    const swipeIndexToIndex = (swipeIndex: number) => {
+      if (swipeIndex === -1) {
+        return props.loop ? length.value - 1 : 0
+      }
+      if (swipeIndex === length.value) {
+        return props.loop ? 0 : length.value - 1
+      }
+
+      return swipeIndex
+    }
+
+    const boundaryIndex = (index: number) => {
+      if (index < 0) {
+        return 0
+      }
+      if (index > length.value - 1) {
+        return length.value - 1
+      }
+
+      return index
+    }
+
+    const resetPosition = (fn?: () => void) => {
+      const exceedLeft = translate.value >= size.value
+      const exceedRight = translate.value <= -trackSize.value
+      const leftTranslate = 0
+      const rightTranslate = -(trackSize.value - size.value)
+
+      lockDuration.value = true
+      // 检测是否有越界情况 越界修正
+      if (exceedLeft || exceedRight) {
+        lockDuration.value = true
+        translate.value = exceedRight ? leftTranslate : rightTranslate
+        findSwipeItemProvider(0).setTranslate(0)
+        findSwipeItemProvider(length.value - 1).setTranslate(0)
+      }
+
+      nextTickFrame(() => {
+        lockDuration.value = false
+        fn?.()
+      })
+    }
+
+    const initialIndex = () => {
+      if (!initial) {
+        lockDuration.value = true
+        index.value = boundaryIndex(props.initialIndex)
+        translate.value = index.value * -size.value
+        initial = true
+        nextTickFrame(() => {
+          lockDuration.value = false
+        })
+      }
+    }
+
+    const next = () => {
+      if (length.value <= 1) {
+        return
+      }
+
+      resetPosition(() => {
+        if (index.value === length.value - 1) {
+          if (props.loop) {
+            index.value = 0
+            findSwipeItemProvider(0).setTranslate(trackSize.value)
+            translate.value = length.value * -size.value
+          }
+        } else {
+          index.value++
+          translate.value = index.value * -size.value
+        }
+
+        props.onChange?.(index.value)
+      })
+    }
+
+    const prev = () => {
+      if (length.value <= 1) {
+        return
+      }
+
+      resetPosition(() => {
+        if (index.value === 0) {
+          if (props.loop) {
+            index.value = length.value - 1
+            findSwipeItemProvider(length.value - 1).setTranslate(-trackSize.value)
+            translate.value = size.value
+          }
+        } else {
+          index.value--
+          translate.value = index.value * -size.value
+        }
+
+        props.onChange?.(index.value)
+      })
+    }
+
+    const to = (idx: number) => {
+      if (length.value <= 1 || idx === index.value) {
+        return
+      }
+
+      idx = idx < 0 ? 0 : idx
+      idx = idx >= length.value ? length.value : idx
+
+      const task = idx > index.value ? next : prev
+
+      Array.from({ length: Math.abs(idx - index.value) }).forEach(task)
+    }
+
+    const startAutoplay = () => {
+      if (!props.autoplay || length.value <= 1) {
+        return
+      }
+
+      stopAutoplay()
+
+      timer = window.setTimeout(() => {
+        next()
+        startAutoplay()
+      }, Number(props.autoplay))
+    }
+
+    const stopAutoplay = () => {
+      timer && clearInterval(timer)
+    }
+
+    const handleTouchstart = (event: TouchEvent) => {
+      if (length.value <= 1 || !props.touchable) {
+        return
+      }
+
+      const { clientX, clientY } = event.touches[0]
+      startX = clientX
+      startY = clientY
+      startTime = performance.now()
+      touching = true
+      stopAutoplay()
+
+      resetPosition(() => {
+        lockDuration.value = true
+      })
+    }
+
+    const handleTouchmove = (event: TouchEvent) => {
+      if (!touching) {
+        return
+      }
+
+      const { clientX, clientY } = event.touches[0]
+      const moveX = prevX !== undefined ? clientX - prevX : 0
+      const moveY = prevY !== undefined ? clientY - prevY : 0
+      prevX = clientX
+      prevY = clientY
+
+      translate.value += props.vertical ? moveY : moveX
+
+      dispatchBorrower()
+    }
+
+    const handleTouchend = () => {
+      if (!touching) {
+        return
+      }
+
+      const positive = props.vertical ? (prevY as number) < startY : (prevX as number) < startX
+      const distance = props.vertical ? Math.abs(startY - (prevY as number)) : Math.abs(startX - (prevX as number))
+      const quickSwiping = performance.now() - startTime <= SWIPE_DELAY && distance >= SWIPE_DISTANCE
+      const swipeIndex = quickSwiping
+        ? positive
+          ? getSwipeIndex(index.value + 1)
+          : getSwipeIndex(index.value - 1)
+        : getSwipeIndex()
+
+      touching = false
+      lockDuration.value = false
+      prevX = undefined
+      prevY = undefined
+
+      translate.value = swipeIndex * -size.value
+      index.value = swipeIndexToIndex(swipeIndex)
+      startAutoplay()
+
+      props.onChange?.(index.value)
+    }
+
+    watch(
+      () => length.value,
+      () => {
+        initialIndex()
+        startAutoplay()
+        trackSize.value = size.value * length.value
+      }
+    )
+
+    watch(
+      () => swipeEl.value,
+      () => {
+        size.value = props.vertical
+          ? (swipeEl.value as HTMLElement).offsetHeight
+          : (swipeEl.value as HTMLElement).offsetWidth
+      }
+    )
+
+    onUnmounted(stopAutoplay)
+
+    const swipeProvider: SwipeProvider = {
+      size,
+      vertical,
+    }
+
+    bindSwipeItem(swipeProvider)
+
+    return {
+      length,
+      index,
+      swipeEl,
+      trackSize,
+      translate,
+      lockDuration,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      next,
+      prev,
+      to,
+    }
+  },
 })
 </script>
 
diff --git a/packages/varlet-ui/src/swipe/example/index.vue b/packages/varlet-ui/src/swipe/example/index.vue
index e1ae18879a5..285976224a7 100644
--- a/packages/varlet-ui/src/swipe/example/index.vue
+++ b/packages/varlet-ui/src/swipe/example/index.vue
@@ -1,21 +1,21 @@
 <template>
-	<app-type>横着的</app-type>
-	<var-swipe class="swipe" ref="swipe" :initial-index="2" @change="log">
-		<var-swipe-item style="background: red">0</var-swipe-item>
-		<var-swipe-item style="background: yellow">1</var-swipe-item>
-		<var-swipe-item style="background: grey">2</var-swipe-item>
-	</var-swipe>
+  <app-type>横着的</app-type>
+  <var-swipe class="swipe" ref="swipe" :initial-index="2" @change="log" :autoplay="2000">
+    <var-swipe-item style="background: red">0</var-swipe-item>
+    <var-swipe-item style="background: yellow">1</var-swipe-item>
+    <var-swipe-item style="background: grey">2</var-swipe-item>
+  </var-swipe>
 
-	<app-type>竖着的</app-type>
-	<var-swipe class="swipe" ref="swipe" vertical indicator-color="rgb(33,150,243)">
-		<var-swipe-item style="background: red">0</var-swipe-item>
-		<var-swipe-item style="background: yellow">1</var-swipe-item>
-		<var-swipe-item style="background: grey">2</var-swipe-item>
-	</var-swipe>
+  <app-type>竖着的</app-type>
+  <var-swipe class="swipe" ref="swipe" vertical indicator-color="rgb(33,150,243)">
+    <var-swipe-item style="background: red">0</var-swipe-item>
+    <var-swipe-item style="background: yellow">1</var-swipe-item>
+    <var-swipe-item style="background: grey">2</var-swipe-item>
+  </var-swipe>
 
-	<var-button @click="swipe.next()">下一页</var-button>
-	<var-button @click="swipe.prev()">上一页</var-button>
-	<var-button @click="swipe.to(2)">跳转下标2</var-button>
+  <var-button @click="swipe.next()">下一页</var-button>
+  <var-button @click="swipe.prev()">上一页</var-button>
+  <var-button @click="swipe.to(2)">跳转下标2</var-button>
 </template>
 
 <script lang="ts">
@@ -25,27 +25,27 @@ import SwipeItem from '../../swipe-item'
 import Button from '../../button'
 
 export default defineComponent({
-	name: 'SwipeExample',
-	components: {
-		[Swipe.name]: Swipe,
-		[SwipeItem.name]: SwipeItem,
-		[Button.name]: Button,
-	},
-	setup() {
-		return {
-			swipe: ref(null),
-			log(index: number) {
-				console.log(index)
-			},
-		}
-	},
+  name: 'SwipeExample',
+  components: {
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem,
+    [Button.name]: Button,
+  },
+  setup() {
+    return {
+      swipe: ref(null),
+      log(index: number) {
+        console.log(index)
+      },
+    }
+  },
 })
 </script>
 
 <style scoped lang="less">
 .swipe {
-	width: 100%;
-	height: 200px;
-	margin-bottom: 20px;
+  width: 100%;
+  height: 200px;
+  margin-bottom: 20px;
 }
 </style>