From 3b3c5a3bb32363bbe4aeaf2867562b3d72446162 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 15 Apr 2024 00:14:21 +0800
Subject: [PATCH 1/7] refactor: use pointer event replace touch event

---
 src/App.vue                                   | 20 +++++++++----------
 src/assets/less/custom.less                   |  1 +
 src/components/slide/SlideHorizontal.vue      | 15 +++++++-------
 .../slide/SlideVerticalInfinite.vue           |  9 +++++----
 src/components/slide/common.js                | 14 +++++++++----
 5 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 362401e..1cc13d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,16 +6,16 @@
       </keep-alive>
     </transition>
   </router-view>
-  <BaseMask v-if="!isMobile" />
-  <div v-if="!isMobile" class="guide">
-    <Icon icon="mynaui:danger-triangle" />
-    <div class="txt">
-      <h2>切换至手机模式才可正常使用</h2>
-      <h3>1. 按 F12 调出控制台</h3>
-      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
-    </div>
-    <img src="@/assets/img/guide.png" alt="" />
-  </div>
+  <!--  <BaseMask v-if="!isMobile" />-->
+  <!--  <div v-if="!isMobile" class="guide">-->
+  <!--    <Icon icon="mynaui:danger-triangle" />-->
+  <!--    <div class="txt">-->
+  <!--      <h2>切换至手机模式才可正常使用</h2>-->
+  <!--      <h3>1. 按 F12 调出控制台</h3>-->
+  <!--      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>-->
+  <!--    </div>-->
+  <!--    <img src="@/assets/img/guide.png" alt="" />-->
+  <!--  </div>-->
   <Call />
 </template>
 <script setup lang="ts">
diff --git a/src/assets/less/custom.less b/src/assets/less/custom.less
index b23bd6d..b31a560 100644
--- a/src/assets/less/custom.less
+++ b/src/assets/less/custom.less
@@ -117,6 +117,7 @@ p {
 }
 
 .slide {
+  touch-action: none;
   height: 100%;
   width: 100%;
   transition: height 0.3s;
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index c7c0584..31ec3b7 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -40,7 +40,8 @@ const state = reactive({
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 }
+  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  isDown: false
 })
 
 watch(
@@ -73,11 +74,11 @@ onUnmounted(() => {
   ob.disconnect()
 })
 
-function touchStart(e: TouchEvent) {
+function touchStart(e: PointerEvent) {
   slideTouchStart(e, wrapperEl.value, state)
 }
 
-function touchMove(e: TouchEvent) {
+function touchMove(e: PointerEvent) {
   slideTouchMove(
     e,
     wrapperEl.value,
@@ -91,7 +92,7 @@ function touchMove(e: TouchEvent) {
   )
 }
 
-function touchEnd(e: TouchEvent) {
+function touchEnd(e: PointerEvent) {
   slideTouchEnd(e, state, canNext, () => {})
   slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
 }
@@ -109,9 +110,9 @@ function canNext(isNext: boolean) {
     <div
       class="slide-list"
       ref="wrapperEl"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
+      @pointerdown="touchStart"
+      @pointermove="touchMove"
+      @pointerup="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 5159db2..0618ed3 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -68,7 +68,8 @@ const state = reactive({
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 }
+  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  isDown: false
 })
 const baseStore = useBaseStore()
 
@@ -342,9 +343,9 @@ function canNext(isNext) {
       class="slide-list flex-direction-column"
       ref="wrapperEl"
       @click="null"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
+      @pointerdown="touchStart"
+      @pointermove="touchMove"
+      @pointerup="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/components/slide/common.js b/src/components/slide/common.js
index 90790ce..ad5cdc1 100644
--- a/src/components/slide/common.js
+++ b/src/components/slide/common.js
@@ -21,8 +21,9 @@ export function slideInit(el, state, type) {
 
 export function slideTouchStart(e, el, state) {
   Utils.$setCss(el, 'transition-duration', `0ms`)
-  state.start.x = e.touches[0].pageX
-  state.start.y = e.touches[0].pageY
+  state.isDown = true
+  state.start.x = e.pageX
+  state.start.y = e.pageY
   state.start.time = Date.now()
 }
 
@@ -55,8 +56,11 @@ export function slideTouchMove(
   notNextCb,
   slideOtherDirectionCb = null
 ) {
-  state.move.x = e.touches[0].pageX - state.start.x
-  state.move.y = e.touches[0].pageY - state.start.y
+  if (!state.isDown) {
+    return
+  }
+  state.move.x = e.pageX - state.start.x
+  state.move.y = e.pageY - state.start.y
 
   let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
@@ -99,6 +103,8 @@ export function slideTouchEnd(
   doNotNextCb,
   type = SlideType.HORIZONTAL
 ) {
+  state.isDown = false
+
   let isHorizontal = type === SlideType.HORIZONTAL
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 

From 5439b0f43b644ebe14477fe09ce22610824edaae Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 15 Apr 2024 19:01:31 +0800
Subject: [PATCH 2/7] refactor: save

---
 src/components/UserPanel.vue | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 63ef41b..c67162f 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -39,9 +39,9 @@
     <div
       class="main"
       ref="main"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
+      @pointerdown="touchStart"
+      @pointermove="touchMove"
+      @pointerup="touchEnd"
     >
       <!--   src="@/assets/img/header-bg.png"   -->
       <header>
@@ -193,7 +193,7 @@
           <span>你可能感兴趣</span>
           <img src="@/assets/img/icon/about-gray.png" />
         </div>
-        <div class="friends" @touchmove="stop">
+        <div class="friends" @pointermove="stop">
           <div class="friend" :key="i" v-for="(item, i) in baseStore.friends.all">
             <img
               :style="item.select ? 'opacity: .5;' : ''"
@@ -291,7 +291,8 @@ const state = reactive({
   canMoveMaxHeight: document.body.clientHeight / 4,
   //是否自动放大Cover
   isAutoScaleCover: false,
-  uid: null
+  uid: null,
+  isDown: false
 })
 
 watch(
@@ -351,9 +352,10 @@ function scroll() {
   }
 }
 
-function touchStart(e) {
-  state.start.x = e.touches[0].pageX
-  state.start.y = e.touches[0].pageY
+function touchStart(e: PointerEvent) {
+  state.isDown = true
+  state.start.x = e.pageX
+  state.start.y = e.pageY
   state.start.time = Date.now()
   state.isTop = page.value.scrollTop === 0
   if (state.isTop) {
@@ -362,9 +364,12 @@ function touchStart(e) {
   // console.log('touchStart', page.value.scrollTop)
 }
 
-function touchMove(e) {
-  state.move.x = e.touches[0].pageX - state.start.x
-  state.move.y = e.touches[0].pageY - state.start.y
+function touchMove(e: PointerEvent) {
+  if (!state.isDown) {
+    return
+  }
+  state.move.x = e.pageX - state.start.x
+  state.move.y = e.pageY - state.start.y
   let isNext = state.move.y < 0
 
   // console.log('touchMove', page.value.scrollTop)
@@ -377,6 +382,7 @@ function touchMove(e) {
 }
 
 function touchEnd() {
+  state.isDown = false
   if (state.isTop) {
     state.isTop = false
     cover.value.style.transition = 'all .3s'

From 6ce731447ab6d9bc26b238d295b69b123e5f9cc8 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 16 Apr 2024 23:26:14 +0800
Subject: [PATCH 3/7] refactor: save

---
 src/components/slide/SlideVertical.vue | 9 +++++----
 src/utils/hooks/useNav.ts              | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index 00434b6..aa0ae8e 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -35,7 +35,8 @@ const state = reactive({
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 }
+  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  isDown: false
 })
 
 watch(
@@ -85,9 +86,9 @@ function canNext(isNext) {
     <div
       class="slide-list flex-direction-column"
       ref="wrapperEl"
-      @touchstart="touchStart"
-      @touchmove="touchMove"
-      @touchend="touchEnd"
+      @pointerdown="touchStart"
+      @pointermove="touchMove"
+      @pointerup="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/utils/hooks/useNav.ts b/src/utils/hooks/useNav.ts
index 3c7cb89..3ac2a46 100644
--- a/src/utils/hooks/useNav.ts
+++ b/src/utils/hooks/useNav.ts
@@ -6,7 +6,7 @@ export function useNav() {
   const router = useRouter()
   const store = useBaseStore()
 
-  return (path, query = {}, data) => {
+  return (path, query = {}, data?: any) => {
     if (data) {
       store.routeData = cloneDeep(data)
     }

From 8356e1934d48808ae5217f375b567cf09bcecc81 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Thu, 18 Apr 2024 18:53:19 +0800
Subject: [PATCH 4/7] refactor: save

---
 src/App.vue                                        | 2 +-
 src/components/slide/SlideAlbum.vue                | 2 +-
 src/components/slide/SlideHorizontal.vue           | 2 +-
 src/components/slide/SlideVertical.vue             | 2 +-
 src/components/slide/SlideVerticalInfinite.vue     | 2 +-
 src/{components/slide/common.js => utils/slide.js} | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename src/{components/slide/common.js => utils/slide.js} (98%)

diff --git a/src/App.vue b/src/App.vue
index 1cc13d5..575b7f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,7 +73,7 @@ onMounted(() => {
   setVh()
   // 监听resize事件 视图大小发生变化就重新计算1vh的值
   window.addEventListener('resize', () => {
-    location.reload()
+    location.href = '/'
     setVh()
   })
   //禁止选中文字
diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.vue
index 62df1db..a90814a 100644
--- a/src/components/slide/SlideAlbum.vue
+++ b/src/components/slide/SlideAlbum.vue
@@ -108,7 +108,7 @@ import {
   slideTouchEnd,
   slideTouchMove,
   slideTouchStart
-} from './common'
+} from '@/utils/slide'
 import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
 import ItemToolbar from './ItemToolbar'
 import ItemDesc from './ItemDesc'
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index 31ec3b7..84f3ec7 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -8,7 +8,7 @@ import {
   slideTouchEnd,
   slideTouchMove,
   slideTouchStart
-} from './common'
+} from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
 const props = defineProps({
diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index 00434b6..153b48a 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -8,7 +8,7 @@ import {
   slideTouchEnd,
   slideTouchMove,
   slideTouchStart
-} from './common'
+} from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
 const props = defineProps({
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 0618ed3..1d59fe8 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -8,7 +8,7 @@ import {
   slideTouchEnd,
   slideTouchMove,
   slideTouchStart
-} from './common'
+} from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 import SlideItem from '@/components/slide/SlideItem.vue'
 import bus, { EVENT_KEY } from '../../utils/bus'
diff --git a/src/components/slide/common.js b/src/utils/slide.js
similarity index 98%
rename from src/components/slide/common.js
rename to src/utils/slide.js
index ad5cdc1..83fdb7e 100644
--- a/src/components/slide/common.js
+++ b/src/utils/slide.js
@@ -1,6 +1,6 @@
 import bus from '@/utils/bus'
-import Utils from '@/utils'
-import GM from '@/utils'
+import Utils from '@/utils/index'
+import GM from '@/utils/index'
 import { SlideType } from '@/utils/const_var'
 import { nextTick } from 'vue'
 

From 76e20203357d3757d5a0c36e7f42a6708aa260e2 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 19 Apr 2024 02:18:54 +0800
Subject: [PATCH 5/7] refactor: refactor code and add comment

---
 src/components/UserPanel.vue                  |  28 ++--
 src/components/slide/SlideAlbum.vue           |  22 ++--
 src/components/slide/SlideHorizontal.vue      |  55 ++++----
 src/components/slide/SlideVertical.vue        |  32 ++---
 .../slide/SlideVerticalInfinite.vue           |  33 +++--
 src/pages/home/index.vue                      |   6 +-
 src/pages/home/slide/Community.vue            |   4 +-
 src/pages/home/slide/SlideList.vue            |   2 +-
 src/utils/slide.js                            | 121 +++++++++++-------
 9 files changed, 159 insertions(+), 144 deletions(-)

diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index c67162f..f1c50f2 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -39,9 +39,9 @@
     <div
       class="main"
       ref="main"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
     >
       <!--   src="@/assets/img/header-bg.png"   -->
       <header>
@@ -193,7 +193,7 @@
           <span>你可能感兴趣</span>
           <img src="@/assets/img/icon/about-gray.png" />
         </div>
-        <div class="friends" @pointermove="stop">
+        <div class="friends" @touchmove="stop">
           <div class="friend" :key="i" v-for="(item, i) in baseStore.friends.all">
             <img
               :style="item.select ? 'opacity: .5;' : ''"
@@ -291,8 +291,7 @@ const state = reactive({
   canMoveMaxHeight: document.body.clientHeight / 4,
   //是否自动放大Cover
   isAutoScaleCover: false,
-  uid: null,
-  isDown: false
+  uid: null
 })
 
 watch(
@@ -352,10 +351,9 @@ function scroll() {
   }
 }
 
-function touchStart(e: PointerEvent) {
-  state.isDown = true
-  state.start.x = e.pageX
-  state.start.y = e.pageY
+function touchStart(e: TouchEvent) {
+  state.start.x = e.touches[0].pageX
+  state.start.y = e.touches[0].pageY
   state.start.time = Date.now()
   state.isTop = page.value.scrollTop === 0
   if (state.isTop) {
@@ -364,12 +362,9 @@ function touchStart(e: PointerEvent) {
   // console.log('touchStart', page.value.scrollTop)
 }
 
-function touchMove(e: PointerEvent) {
-  if (!state.isDown) {
-    return
-  }
-  state.move.x = e.pageX - state.start.x
-  state.move.y = e.pageY - state.start.y
+function touchMove(e: TouchEvent) {
+  state.move.x = e.touches[0].pageX - state.start.x
+  state.move.y = e.touches[0].pageY - state.start.y
   let isNext = state.move.y < 0
 
   // console.log('touchMove', page.value.scrollTop)
@@ -382,7 +377,6 @@ function touchMove(e: PointerEvent) {
 }
 
 function touchEnd() {
-  state.isDown = false
   if (state.isTop) {
     state.isTop = false
     cover.value.style.transition = 'all .3s'
diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.vue
index a90814a..51ea98f 100644
--- a/src/components/slide/SlideAlbum.vue
+++ b/src/components/slide/SlideAlbum.vue
@@ -102,12 +102,12 @@ import {
   watch
 } from 'vue'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
-  slideTouchMove,
-  slideTouchStart
+  slideTouchUp,
+  slidePointerMove,
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
 import ItemToolbar from './ItemToolbar'
@@ -243,6 +243,8 @@ const wrapperEl = ref(null)
 let lockDatetime = 0
 
 const state = reactive({
+  type: SlideType.HORIZONTAL,
+  judgeValue: 20,
   name: 'SlideHorizontal',
   localIndex: 0,
   needCheck: true,
@@ -354,7 +356,7 @@ watch(
     GM.$setCss(
       wrapperEl.value,
       'transform',
-      `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL)}px, 0, 0)`
+      `translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`
     )
   }
 )
@@ -408,7 +410,7 @@ function touchStart(e) {
   // Utils.$showNoticeDialog('start'+e.touches.length)
   console.log('start', e.touches.length)
   if (e.touches.length === 1) {
-    slideTouchStart(e, wrapperEl.value, state)
+    slidePointerDown(e, wrapperEl.value, state)
   } else {
     if (state.operationStatus === SlideAlbumOperationStatus.Zooming) {
       // state.start.center = Utils.getCenter(state.start.point1, state.start.point2)
@@ -451,16 +453,14 @@ function touchMove(e) {
     } else {
       // console.log('m2')
       state.isAutoPlay = false
-      slideTouchMove(
+      slidePointerMove(
         e,
         wrapperEl.value,
         state,
-        judgeValue,
         canNext,
         () => {
           // console.log('move-nextcb')
         },
-        SlideType.HORIZONTAL,
         () => {
           if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
             Utils.$stopPropagation(e)
@@ -567,7 +567,7 @@ function touchEnd(e) {
       startLoop()
       state.operationStatus = SlideAlbumOperationStatus.Look
     } else {
-      slideTouchEnd(
+      slideTouchUp(
         e,
         state,
         canNext,
@@ -582,7 +582,7 @@ function touchEnd(e) {
           startLoop()
         }
       )
-      slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, null)
+      slideReset(wrapperEl.value, state)
     }
   }
 }
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index 84f3ec7..05bb84c 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -2,12 +2,12 @@
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
+  slidePointerDown,
+  slidePointerMove,
   slideReset,
-  slideTouchEnd,
-  slideTouchMove,
-  slideTouchStart
+  slideTouchUp
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
@@ -31,17 +31,22 @@ const props = defineProps({
 const emit = defineEmits(['update:index'])
 
 let ob = null
-const judgeValue = 20
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.HORIZONTAL,
   name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
-  isDown: false
+  wrapper: {
+    width: 0,
+    height: 0,
+    //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
+    childrenLength: 0
+  }
 })
 
 watch(
@@ -55,15 +60,17 @@ watch(
       GM.$setCss(
         wrapperEl.value,
         'transform',
-        `translate3d(${getSlideDistance(state, SlideType.HORIZONTAL, wrapperEl.value)}px, 0, 0)`
+        `translate3d(${getSlideOffset(state, wrapperEl.value)}px, 0, 0)`
       )
     }
   }
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
+  slideInit(wrapperEl.value, state)
 
+  //观察子元素数量变动，获取最新数量
+  //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件
   ob = new MutationObserver(() => {
     state.wrapper.childrenLength = wrapperEl.value.children.length
   })
@@ -74,27 +81,17 @@ onUnmounted(() => {
   ob.disconnect()
 })
 
-function touchStart(e: PointerEvent) {
-  slideTouchStart(e, wrapperEl.value, state)
+function touchStart(e: TouchEvent) {
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
-function touchMove(e: PointerEvent) {
-  slideTouchMove(
-    e,
-    wrapperEl.value,
-    state,
-    judgeValue,
-    canNext,
-    null,
-    SlideType.HORIZONTAL,
-    null,
-    null
-  )
+function touchMove(e: TouchEvent) {
+  slidePointerMove(e, wrapperEl.value, state, canNext)
 }
 
-function touchEnd(e: PointerEvent) {
-  slideTouchEnd(e, state, canNext, () => {})
-  slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
+function touchEnd(e: TouchEvent) {
+  slideTouchUp(e, state, canNext, () => {})
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext: boolean) {
@@ -110,9 +107,9 @@ function canNext(isNext: boolean) {
     <div
       class="slide-list"
       ref="wrapperEl"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index 4878bbe..16ef8ef 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -2,12 +2,12 @@
 import { onMounted, reactive, ref, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
-  slideTouchMove,
-  slideTouchStart
+  slideTouchUp,
+  slidePointerMove,
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
@@ -26,17 +26,17 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:index'])
 
-const judgeValue = 20
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.HORIZONTAL,
   name: 'SlideVertical',
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
-  isDown: false
+  wrapper: { width: 0, height: 0, childrenLength: 0 }
 })
 
 watch(
@@ -50,27 +50,27 @@ watch(
       GM.$setCss(
         wrapperEl.value,
         'transform',
-        `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`
+        `translate3d(0,${getSlideOffset(state, wrapperEl.value)}px, 0)`
       )
     }
   }
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value, state, SlideType.VERTICAL)
+  slideInit(wrapperEl.value, state)
 })
 
 function touchStart(e) {
-  slideTouchStart(e, wrapperEl.value, state)
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
+  slidePointerMove(e, wrapperEl.value, state, canNext)
 }
 
 function touchEnd(e) {
-  slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL)
-  slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
+  slideTouchUp(e, state, canNext, null, null, SlideType.VERTICAL)
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext) {
@@ -86,9 +86,9 @@ function canNext(isNext) {
     <div
       class="slide-list flex-direction-column"
       ref="wrapperEl"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 1d59fe8..6c6801f 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -2,12 +2,12 @@
 import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue'
 import GM from '../../utils'
 import {
-  getSlideDistance,
+  getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchEnd,
-  slideTouchMove,
-  slideTouchStart
+  slideTouchUp,
+  slidePointerMove,
+  slidePointerDown
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 import SlideItem from '@/components/slide/SlideItem.vue'
@@ -62,14 +62,15 @@ const appInsMap = new Map()
 const itemClassName = 'slide-item'
 const wrapperEl = ref(null)
 const state = reactive({
+  judgeValue: 20,
+  type: SlideType.VERTICAL,
   name: props.name,
   localIndex: props.index,
   needCheck: true,
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 },
-  isDown: false
+  wrapper: { width: 0, height: 0, childrenLength: 0 }
 })
 const baseStore = useBaseStore()
 
@@ -169,11 +170,7 @@ function insertContent(list = props.list) {
     let el = getInsEl(item, start + index, start + index === state.localIndex)
     wrapperEl.value.appendChild(el)
   })
-  GM.$setCss(
-    wrapperEl.value,
-    'transform',
-    `translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px,  0px)`
-  )
+  GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,${getSlideOffset(state)}px,  0px)`)
 
   if (state.localIndex > 2 && list.length > 5) {
     $(wrapperEl.value)
@@ -229,12 +226,12 @@ function getInsEl(item, index, play = false) {
 }
 
 function touchStart(e) {
-  slideTouchStart(e, wrapperEl.value, state)
+  slidePointerDown(e, wrapperEl.value, state)
 }
 
 //TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
+  slidePointerMove(e, wrapperEl.value, state, canNext)
 }
 
 function touchEnd(e) {
@@ -246,7 +243,7 @@ function touchEnd(e) {
   ) {
     emit('refresh')
   }
-  slideTouchEnd(
+  slideTouchUp(
     e,
     state,
     canNext,
@@ -325,7 +322,7 @@ function touchEnd(e) {
     null,
     SlideType.VERTICAL
   )
-  slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
+  slideReset(wrapperEl.value, state, emit)
 }
 
 function canNext(isNext) {
@@ -343,9 +340,9 @@ function canNext(isNext) {
       class="slide-list flex-direction-column"
       ref="wrapperEl"
       @click="null"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
     >
       <slot></slot>
     </div>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 6dfd362..43d0a8b 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="test-slide-wrapper" id="home-index">
-    <SlideHorizontal v-model:index="state.baseIndex">
+    <SlideHorizontal name="first" v-model:index="state.baseIndex">
       <SlideItem class="sidebar">
         <div class="header">
           <div class="left">下午好</div>
@@ -100,13 +100,13 @@
         <IndicatorHome
           v-if="!state.fullScreen"
           :loading="baseStore.loading"
-          name="main"
+          name="second"
           @showSlidebar="state.baseIndex = 0"
           v-model:index="state.navIndex"
         />
         <SlideHorizontal
           class="first-horizontal-item"
-          name="main"
+          name="second"
           :change-active-index-use-anim="false"
           v-model:index="state.navIndex"
         >
diff --git a/src/pages/home/slide/Community.vue b/src/pages/home/slide/Community.vue
index b40f879..f835050 100644
--- a/src/pages/home/slide/Community.vue
+++ b/src/pages/home/slide/Community.vue
@@ -11,7 +11,7 @@
         </div>
         <WaterfallList :list="list" class="list">
           <template v-slot="{ item }">
-            <div class="card" @click="(e) => test(e, item)">
+            <div class="card" @click="(e) => showDetail(e, item)">
               <img class="poster" v-lazy="_checkImgUrl(item.note_card?.cover?.url_default)" />
               <div class="bottom">
                 <div class="title">
@@ -127,7 +127,7 @@ function close() {
   }, 300)
 }
 
-function test(e, item) {
+function showDetail(e, item) {
   let data = Mock.mock({
     'comment_list|3-50': [
       {
diff --git a/src/pages/home/slide/SlideList.vue b/src/pages/home/slide/SlideList.vue
index 6629080..d25c1c5 100644
--- a/src/pages/home/slide/SlideList.vue
+++ b/src/pages/home/slide/SlideList.vue
@@ -4,7 +4,7 @@
     v-love="props.uniqueId"
     :id="props.uniqueId"
     :uniqueId="props.uniqueId"
-    name="main"
+    name="infinite"
     :active="props.active"
     :loading="baseStore.loading"
     v-model:index="state.index"
diff --git a/src/utils/slide.js b/src/utils/slide.js
index 83fdb7e..86d3eca 100644
--- a/src/utils/slide.js
+++ b/src/utils/slide.js
@@ -4,35 +4,46 @@ import GM from '@/utils/index'
 import { SlideType } from '@/utils/const_var'
 import { nextTick } from 'vue'
 
-export function slideInit(el, state, type) {
+//初始化信息，获取slide dom的长宽、子元素数量，用于move事件判断能否滑动
+export function slideInit(el, state) {
   state.wrapper.width = GM.$getCss(el, 'width')
   state.wrapper.height = GM.$getCss(el, 'height')
   nextTick(() => {
     state.wrapper.childrenLength = el.children.length
   })
 
-  let t = getSlideDistance(state, type, el)
+  //获取偏移量
+  let t = getSlideOffset(state, el)
   let dx1 = 0,
     dx2 = 0
-  if (type === SlideType.HORIZONTAL) dx1 = t
+  if (state.type === SlideType.HORIZONTAL) dx1 = t
   else dx2 = t
   Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
 }
 
-export function slideTouchStart(e, el, state) {
+export function slidePointerDown(e, el, state) {
   Utils.$setCss(el, 'transition-duration', `0ms`)
-  state.isDown = true
-  state.start.x = e.pageX
-  state.start.y = e.pageY
+  //记录起点坐标，用于move事件计算移动距离
+  state.start.x = e.touches[0].pageX
+  state.start.y = e.touches[0].pageY
+  //记录按下时间，用于up事件判断滑动时间
   state.start.time = Date.now()
 }
 
-//检测能否滑动
-export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
+/**
+ * 检测能否滑动
+ * @param state
+ * @returns {boolean}
+ */
+export function canSlide(state) {
+  //每次按下都需要检测，up事件会重置为true
   if (state.needCheck) {
-    if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) {
+    //判断move x和y的距离是否大于判断值，因为距离太小无法判断滑动方向
+    if (Math.abs(state.move.x) > state.judgeValue || Math.abs(state.move.y) > state.judgeValue) {
+      //放大再相除，根据长宽比判断方向，angle大于1就是左右滑动，小于是上下滑动
       let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10)
-      state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
+      //根据当前slide的类型，判断能否滑动，并记录下来，后续不再判断，直接返回记录值
+      state.next = state.type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1
       // console.log('angle', angle, state.next)
       state.needCheck = false
     } else {
@@ -43,44 +54,47 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
 }
 
 /**
+ * move事件
+ * @param e
+ * @param el
+ * @param state
+ * @param canNextCb 是否能继续滑的回调
+ * @param nextCb 能继续滑的回调
+ * @param notNextCb 不能继续滑的回调
  * @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
- * */
-export function slideTouchMove(
+ */
+export function slidePointerMove(
   e,
   el,
   state,
-  judgeValue,
-  canNextCb,
-  nextCb,
-  type = SlideType.HORIZONTAL,
-  notNextCb,
+  canNextCb = null,
+  nextCb = null,
+  notNextCb = null,
   slideOtherDirectionCb = null
 ) {
-  if (!state.isDown) {
-    return
-  }
-  state.move.x = e.pageX - state.start.x
-  state.move.y = e.pageY - state.start.y
+  state.move.x = e.touches[0].pageX - state.start.x
+  state.move.y = e.touches[0].pageY - state.start.y
+  // console.log('move', state.name)
 
-  let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
+  let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
-  let canSlideRes = canSlide(state, judgeValue, type)
+  let canSlideRes = canSlide(state)
 
-  if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
+  if (canSlideRes && state.localIndex === 0 && !isNext && state.type === SlideType.VERTICAL) {
     bus.emit(state.name + '-moveY', state.move.y)
   }
 
   if (canSlideRes) {
     if (canNextCb?.(isNext, e)) {
       nextCb?.()
-      if (type === SlideType.HORIZONTAL) {
+      if (state.type === SlideType.HORIZONTAL) {
         bus.emit(state.name + '-moveX', state.move.x)
       }
       Utils.$stopPropagation(e)
-      let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
+      let t = getSlideOffset(state, el) + (isNext ? state.judgeValue : -state.judgeValue)
       let dx1 = 0
       let dx2 = 0
-      if (type === SlideType.HORIZONTAL) {
+      if (state.type === SlideType.HORIZONTAL) {
         dx1 = t + state.move.x
       } else {
         dx2 = t + state.move.y
@@ -95,22 +109,15 @@ export function slideTouchMove(
   }
 }
 
-export function slideTouchEnd(
-  e,
-  state,
-  canNextCb,
-  nextCb,
-  doNotNextCb,
-  type = SlideType.HORIZONTAL
-) {
-  state.isDown = false
-
-  let isHorizontal = type === SlideType.HORIZONTAL
+export function slideTouchUp(e, state, canNextCb, nextCb, doNotNextCb) {
+  let isHorizontal = state.type === SlideType.HORIZONTAL
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 
   if (!canNextCb?.(isNext)) return doNotNextCb?.()
   if (state.next) {
-    Utils.$stopPropagation(e)
+    //用pointer事件，子元素在这里拦截事件之后，会导致父元素触发一次pointermove事件
+    //用touch事件，不会出现这种情况
+    // Utils.$stopPropagation(e)
     let endTime = Date.now()
     let gapTime = endTime - state.start.time
     let distance = isHorizontal ? state.move.x : state.move.y
@@ -129,12 +136,12 @@ export function slideTouchEnd(
   doNotNextCb?.()
 }
 
-export function slideReset(el, state, type, emit) {
+export function slideReset(el, state, emit = null) {
   Utils.$setCss(el, 'transition-duration', `300ms`)
-  let t = getSlideDistance(state, type, el)
+  let t = getSlideOffset(state, el)
   let dx1 = 0
   let dx2 = 0
-  if (type === SlideType.HORIZONTAL) {
+  if (state.type === SlideType.HORIZONTAL) {
     bus.emit(state.name + '-end', state.localIndex)
     dx1 = t
   } else {
@@ -148,22 +155,42 @@ export function slideReset(el, state, type, emit) {
   emit?.('update:index', state.localIndex)
 }
 
-export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) {
-  if (type === SlideType.HORIZONTAL) {
-    //TODO 统一
+//根据当前index，获取slide偏移距离
+//如果每个页面的宽度是相同均为100%，只需要当前index * wrapper的宽（高）度即可： -state.localIndex * state.wrapper.width
+export function getSlideOffset(state, el) {
+  //横竖判断逻辑基本同理
+  if (state.type === SlideType.HORIZONTAL) {
+    //TODO 去掉if判断
     if (el) {
       let widths = []
+      //获取所有子元素的宽度
       Array.from(el.children).map((v) => {
         widths.push(v.getBoundingClientRect().width)
       })
+      //取0到当前index的子元素的宽度
       widths = widths.slice(0, state.localIndex)
       if (widths.length) {
+        //累计就是当前index之前所有页面的宽度
         return -widths.reduce((a, b) => a + b)
       }
       return 0
     }
     return -state.localIndex * state.wrapper.width
   } else {
+    //TODO 这里有冲突
+    //infinite 列表只需要计算index * 高就行
+    // if (el) {
+    //   //同上
+    //   let heights = []
+    //   Array.from(el.children).map((v) => {
+    //     heights.push(v.getBoundingClientRect().height)
+    //   })
+    //   heights = heights.slice(0, state.localIndex)
+    //   if (heights.length) {
+    //     return -heights.reduce((a, b) => a + b)
+    //   }
+    //   return 0
+    // }
     return -state.localIndex * state.wrapper.height
   }
 }

From 9866b9259b1685f642fb8ea6c10d21ce785305d5 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 19 Apr 2024 17:45:45 +0800
Subject: [PATCH 6/7] refactor: refactor code and add comment

---
 src/components/slide/SlideAlbum.vue           |  10 +-
 src/components/slide/SlideHorizontal.vue      |  13 +-
 src/components/slide/SlideVertical.vue        |  13 +-
 .../slide/SlideVerticalInfinite.vue           | 126 +++++++-------
 src/utils/const_var.ts                        |   3 +-
 src/utils/slide.js                            | 161 +++++++++++-------
 6 files changed, 171 insertions(+), 155 deletions(-)

diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.vue
index 51ea98f..128f5be 100644
--- a/src/components/slide/SlideAlbum.vue
+++ b/src/components/slide/SlideAlbum.vue
@@ -105,7 +105,7 @@ import {
   getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchUp,
+  slideTouchEnd,
   slidePointerMove,
   slidePointerDown
 } from '@/utils/slide'
@@ -459,9 +459,7 @@ function touchMove(e) {
         state,
         canNext,
         () => {
-          // console.log('move-nextcb')
-        },
-        () => {
+          //TODO 这里需要这个事件吗
           if (state.operationStatus !== SlideAlbumOperationStatus.Normal) {
             Utils.$stopPropagation(e)
           }
@@ -567,7 +565,7 @@ function touchEnd(e) {
       startLoop()
       state.operationStatus = SlideAlbumOperationStatus.Look
     } else {
-      slideTouchUp(
+      slideTouchEnd(
         e,
         state,
         canNext,
@@ -595,7 +593,7 @@ function setItemRef(el, key) {
   el && state[key].push(el)
 }
 
-function canNext(isNext) {
+function canNext(state, isNext) {
   let res = !(
     (state.localIndex === 0 && !isNext) ||
     (state.localIndex === props.item.imgs.length - 1 && isNext)
diff --git a/src/components/slide/SlideHorizontal.vue b/src/components/slide/SlideHorizontal.vue
index 05bb84c..d853f49 100644
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@@ -7,7 +7,7 @@ import {
   slidePointerDown,
   slidePointerMove,
   slideReset,
-  slideTouchUp
+  slideTouchEnd
 } from '@/utils/slide'
 import { SlideType } from '@/utils/const_var'
 
@@ -86,20 +86,13 @@ function touchStart(e: TouchEvent) {
 }
 
 function touchMove(e: TouchEvent) {
-  slidePointerMove(e, wrapperEl.value, state, canNext)
+  slidePointerMove(e, wrapperEl.value, state)
 }
 
 function touchEnd(e: TouchEvent) {
-  slideTouchUp(e, state, canNext, () => {})
+  slideTouchEnd(e, state)
   slideReset(wrapperEl.value, state, emit)
 }
-
-function canNext(isNext: boolean) {
-  return !(
-    (state.localIndex === 0 && !isNext) ||
-    (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
-  )
-}
 </script>
 
 <template>
diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue
index 16ef8ef..f5d66fd 100644
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@@ -5,7 +5,7 @@ import {
   getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchUp,
+  slideTouchEnd,
   slidePointerMove,
   slidePointerDown
 } from '@/utils/slide'
@@ -65,20 +65,13 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  slidePointerMove(e, wrapperEl.value, state, canNext)
+  slidePointerMove(e, wrapperEl.value, state)
 }
 
 function touchEnd(e) {
-  slideTouchUp(e, state, canNext, null, null, SlideType.VERTICAL)
+  slideTouchEnd(e, state)
   slideReset(wrapperEl.value, state, emit)
 }
-
-function canNext(isNext) {
-  return !(
-    (state.localIndex === 0 && !isNext) ||
-    (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
-  )
-}
 </script>
 
 <template>
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue
index 6c6801f..58909e3 100644
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/src/components/slide/SlideVerticalInfinite.vue
@@ -5,7 +5,7 @@ import {
   getSlideOffset,
   slideInit,
   slideReset,
-  slideTouchUp,
+  slideTouchEnd,
   slidePointerMove,
   slidePointerDown
 } from '@/utils/slide'
@@ -243,89 +243,77 @@ function touchEnd(e) {
   ) {
     emit('refresh')
   }
-  slideTouchUp(
-    e,
-    state,
-    canNext,
-    (isNext) => {
-      let half = (props.virtualTotal + 1) / 2
-      if (props.list.length > props.virtualTotal) {
-        if (isNext) {
-          if (
-            state.localIndex > props.list.length - props.virtualTotal &&
-            state.localIndex >= half
-          ) {
-            emit('loadMore')
+  slideTouchEnd(e, state, canNext, (isNext) => {
+    let half = (props.virtualTotal + 1) / 2
+    if (props.list.length > props.virtualTotal) {
+      if (isNext) {
+        if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) {
+          emit('loadMore')
+        }
+        let addItemIndex = state.localIndex + 2
+        let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
+        if (state.wrapper.childrenLength < props.virtualTotal) {
+          if (res.length === 0) {
+            wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
           }
-          let addItemIndex = state.localIndex + 2
-          let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
-          if (state.wrapper.childrenLength < props.virtualTotal) {
-            if (res.length === 0) {
-              wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
-            }
-          }
-          if (
-            state.wrapper.childrenLength === props.virtualTotal &&
-            state.localIndex >= (props.virtualTotal + 1) / 2 &&
-            state.localIndex <= props.list.length - 3
-          ) {
-            if (res.length === 0) {
-              wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
-              appInsMap
-                .get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
-                .unmount()
-              // $(wrapperEl.value).find(".base-slide-item:first").remove()
-              $(wrapperEl.value)
-                .find(`.${itemClassName}`)
-                .each(function () {
-                  $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
-                })
-            }
-          }
-          if (state.wrapper.childrenLength > props.virtualTotal) {
+        }
+        if (
+          state.wrapper.childrenLength === props.virtualTotal &&
+          state.localIndex >= (props.virtualTotal + 1) / 2 &&
+          state.localIndex <= props.list.length - 3
+        ) {
+          if (res.length === 0) {
+            wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+            appInsMap
+              .get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
+              .unmount()
+            // $(wrapperEl.value).find(".base-slide-item:first").remove()
             $(wrapperEl.value)
               .find(`.${itemClassName}`)
               .each(function () {
-                let index = $(this).data('index')
-                if (index < state.localIndex - 2) {
-                  appInsMap.get(index).unmount()
-                }
                 $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
               })
           }
-        } else {
-          let addItemIndex = state.localIndex - 2
-          let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
+        }
+        if (state.wrapper.childrenLength > props.virtualTotal) {
+          $(wrapperEl.value)
+            .find(`.${itemClassName}`)
+            .each(function () {
+              let index = $(this).data('index')
+              if (index < state.localIndex - 2) {
+                appInsMap.get(index).unmount()
+              }
+              $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+            })
+        }
+      } else {
+        let addItemIndex = state.localIndex - 2
+        let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
 
-          if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
-            if (res.length === 0) {
-              wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
-              appInsMap
-                .get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index'))
-                .unmount()
-              // $(wrapperEl.value).find(".base-slide-item:last").remove()
-              $(wrapperEl.value)
-                .find(`.${itemClassName}`)
-                .each(function () {
-                  $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
-                })
-            }
-          }
-
-          if (state.wrapper.childrenLength > props.virtualTotal) {
+        if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
+          if (res.length === 0) {
+            wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
             appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
+            // $(wrapperEl.value).find(".base-slide-item:last").remove()
+            $(wrapperEl.value)
+              .find(`.${itemClassName}`)
+              .each(function () {
+                $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+              })
           }
         }
-        state.wrapper.childrenLength = wrapperEl.value.children.length
+
+        if (state.wrapper.childrenLength > props.virtualTotal) {
+          appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
+        }
       }
-    },
-    null,
-    SlideType.VERTICAL
-  )
+      state.wrapper.childrenLength = wrapperEl.value.children.length
+    }
+  })
   slideReset(wrapperEl.value, state, emit)
 }
 
-function canNext(isNext) {
+function canNext(state, isNext) {
   return !(
     (state.localIndex === 0 && !isNext) ||
     (state.localIndex === props.list.length - 1 && isNext)
diff --git a/src/utils/const_var.ts b/src/utils/const_var.ts
index fa09880..51f5cb0 100644
--- a/src/utils/const_var.ts
+++ b/src/utils/const_var.ts
@@ -21,7 +21,8 @@ export default {
 }
 export const SlideType = {
   HORIZONTAL: 0,
-  VERTICAL: 1
+  VERTICAL: 1,
+  VERTICAL_INFINITE: 2
 }
 
 /*图集操作状态*/
diff --git a/src/utils/slide.js b/src/utils/slide.js
index 86d3eca..a5368eb 100644
--- a/src/utils/slide.js
+++ b/src/utils/slide.js
@@ -53,13 +53,25 @@ export function canSlide(state) {
   return state.next
 }
 
+/**
+ * 能否继续滑动
+ * @param state
+ * @param isNext 朝向，向右或向下
+ * @returns {boolean}
+ */
+function canNext(state, isNext) {
+  return !(
+    (state.localIndex === 0 && !isNext) ||
+    (state.localIndex === state.wrapper.childrenLength - 1 && isNext)
+  )
+}
+
 /**
  * move事件
  * @param e
  * @param el
  * @param state
  * @param canNextCb 是否能继续滑的回调
- * @param nextCb 能继续滑的回调
  * @param notNextCb 不能继续滑的回调
  * @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
  */
@@ -68,32 +80,43 @@ export function slidePointerMove(
   el,
   state,
   canNextCb = null,
-  nextCb = null,
   notNextCb = null,
   slideOtherDirectionCb = null
 ) {
+  //计算移动距离
   state.move.x = e.touches[0].pageX - state.start.x
   state.move.y = e.touches[0].pageY - state.start.y
   // console.log('move', state.name)
 
-  let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
-
+  //检测能否滑动
   let canSlideRes = canSlide(state)
 
-  if (canSlideRes && state.localIndex === 0 && !isNext && state.type === SlideType.VERTICAL) {
-    bus.emit(state.name + '-moveY', state.move.y)
+  //是否是往下（右）滑动
+  let isNext = state.type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
+
+  //特别处理：竖直的slide组件，在第一页往下滑动时，向外发送事件
+  //用于首页顶部导航栏的刷新动画
+  if (state.type === SlideType.VERTICAL_INFINITE) {
+    if (canSlideRes && state.localIndex === 0 && !isNext) {
+      bus.emit(state.name + '-moveY', state.move.y)
+    }
   }
 
   if (canSlideRes) {
-    if (canNextCb?.(isNext, e)) {
-      nextCb?.()
+    //如果传了就用，没传就用默认的
+    //无限滑动组件，要特别判断，所以需要传canNextCb
+    if (!canNextCb) canNextCb = canNext
+    if (canNextCb(state, isNext)) {
+      //能滑动，那就把事件捕获，不能给父组件处理
+      Utils.$stopPropagation(e)
       if (state.type === SlideType.HORIZONTAL) {
         bus.emit(state.name + '-moveX', state.move.x)
       }
-      Utils.$stopPropagation(e)
+      //获取偏移量
       let t = getSlideOffset(state, el) + (isNext ? state.judgeValue : -state.judgeValue)
-      let dx1 = 0
-      let dx2 = 0
+      let dx1 = 0,
+        dx2 = 0
+      //偏移量加当前手指移动的距离就是slide要偏移的值
       if (state.type === SlideType.HORIZONTAL) {
         dx1 = t + state.move.x
       } else {
@@ -102,6 +125,7 @@ export function slidePointerMove(
       Utils.$setCss(el, 'transition-duration', `0ms`)
       Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
     } else {
+      //SlideAlbum.vue组件在用，用于捕获事件，阻止事件传递给父slide
       notNextCb?.()
     }
   } else {
@@ -109,33 +133,57 @@ export function slidePointerMove(
   }
 }
 
-export function slideTouchUp(e, state, canNextCb, nextCb, doNotNextCb) {
+/**
+ * 滑动结束事件
+ * @param e
+ * @param state
+ * @param canNextCb
+ * @param nextCb
+ * @param notNextCb
+ * @returns {*}
+ */
+export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb) {
   let isHorizontal = state.type === SlideType.HORIZONTAL
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0
 
-  if (!canNextCb?.(isNext)) return doNotNextCb?.()
   if (state.next) {
-    //用pointer事件，子元素在这里拦截事件之后，会导致父元素触发一次pointermove事件
-    //用touch事件，不会出现这种情况
-    // Utils.$stopPropagation(e)
-    let endTime = Date.now()
-    let gapTime = endTime - state.start.time
-    let distance = isHorizontal ? state.move.x : state.move.y
-    let judgeValue = isHorizontal ? state.wrapper.width : state.wrapper.height
-    if (Math.abs(distance) < 20) gapTime = 1000
-    if (Math.abs(distance) > judgeValue / 3) gapTime = 100
-    if (gapTime < 150) {
-      if (isNext) {
-        state.localIndex++
-      } else {
-        state.localIndex--
+    //同move事件
+    if (!canNextCb) canNextCb = canNext
+    if (canNextCb(state, isNext)) {
+      //能滑动，那就把事件捕获，不能给父组件处理
+      Utils.$stopPropagation(e)
+      //结合时间、距离来判断是否成功滑动
+      let endTime = Date.now()
+      let gapTime = endTime - state.start.time
+      let distance = isHorizontal ? state.move.x : state.move.y
+      let judgeValue = isHorizontal ? state.wrapper.width : state.wrapper.height
+      //1、距离太短，直接不通过
+      if (Math.abs(distance) < 20) gapTime = 1000
+      //2、距离太长，直接通过
+      if (Math.abs(distance) > judgeValue / 3) gapTime = 100
+      //3、若不在上面那个情况，那么只需要判断时间即可
+      if (gapTime < 150) {
+        if (isNext) {
+          state.localIndex++
+        } else {
+          state.localIndex--
+        }
+        return nextCb?.(isNext)
       }
-      return nextCb?.(isNext)
+    } else {
+      return notNextCb?.()
     }
+  } else {
+    notNextCb?.()
   }
-  doNotNextCb?.()
 }
 
+/**
+ * 结束后重置变量
+ * @param el
+ * @param state
+ * @param emit
+ */
 export function slideReset(el, state, emit = null) {
   Utils.$setCss(el, 'transition-duration', `300ms`)
   let t = getSlideOffset(state, el)
@@ -160,37 +208,32 @@ export function slideReset(el, state, emit = null) {
 export function getSlideOffset(state, el) {
   //横竖判断逻辑基本同理
   if (state.type === SlideType.HORIZONTAL) {
-    //TODO 去掉if判断
-    if (el) {
-      let widths = []
-      //获取所有子元素的宽度
-      Array.from(el.children).map((v) => {
-        widths.push(v.getBoundingClientRect().width)
-      })
-      //取0到当前index的子元素的宽度
-      widths = widths.slice(0, state.localIndex)
-      if (widths.length) {
-        //累计就是当前index之前所有页面的宽度
-        return -widths.reduce((a, b) => a + b)
-      }
-      return 0
+    let widths = []
+    //获取所有子元素的宽度
+    Array.from(el.children).map((v) => {
+      widths.push(v.getBoundingClientRect().width)
+    })
+    //取0到当前index的子元素的宽度
+    widths = widths.slice(0, state.localIndex)
+    if (widths.length) {
+      //累计就是当前index之前所有页面的宽度
+      return -widths.reduce((a, b) => a + b)
     }
-    return -state.localIndex * state.wrapper.width
+    return 0
+    // return -state.localIndex * state.wrapper.width
   } else {
-    //TODO 这里有冲突
-    //infinite 列表只需要计算index * 高就行
-    // if (el) {
-    //   //同上
-    //   let heights = []
-    //   Array.from(el.children).map((v) => {
-    //     heights.push(v.getBoundingClientRect().height)
-    //   })
-    //   heights = heights.slice(0, state.localIndex)
-    //   if (heights.length) {
-    //     return -heights.reduce((a, b) => a + b)
-    //   }
-    //   return 0
-    // }
-    return -state.localIndex * state.wrapper.height
+    if (state.type === SlideType.VERTICAL_INFINITE) {
+      //同上
+      let heights = []
+      Array.from(el.children).map((v) => {
+        heights.push(v.getBoundingClientRect().height)
+      })
+      heights = heights.slice(0, state.localIndex)
+      if (heights.length) return -heights.reduce((a, b) => a + b)
+      return 0
+    } else {
+      //VERTICAL_INFINITE 列表只需要计算index * 高就行
+      return -state.localIndex * state.wrapper.height
+    }
   }
 }

From a08a4c85fe7e5acb91411f2706bacd0645bbc7f7 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 19 Apr 2024 17:51:53 +0800
Subject: [PATCH 7/7] refactor: update README.md

---
 .github/workflows/readme.yml | 72 ++++++++++++++++++------------------
 README.md                    |  6 +--
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/.github/workflows/readme.yml b/.github/workflows/readme.yml
index e23608f..2773f84 100644
--- a/.github/workflows/readme.yml
+++ b/.github/workflows/readme.yml
@@ -1,36 +1,36 @@
-#name: Translate README
-#
-#on:
-#  push:
-#    branches:
-#      - master
-#jobs:
-#  build:
-#    runs-on: ubuntu-latest
-#    steps:
-#      - uses: actions/checkout@v2
-#      - name: Setup Node.js
-#        uses: actions/setup-node@v1
-#        with:
-#          node-version: 12.x
-#      # ISO Langusge Codes: https://cloud.google.com/translate/docs/languages
-#      - name: Adding README - English
-#        uses: dephraiim/translate-readme@main
-#        with:
-#          LANG: en
-#      - name: Adding README - Japanese
-#        uses: dephraiim/translate-readme@main
-#        with:
-#          LANG: ja
-#      - name: Adding README - German
-#        uses: dephraiim/translate-readme@main
-#        with:
-#          LANG: de
-#      - name: Adding README - French
-#        uses: dephraiim/translate-readme@main
-#        with:
-#          LANG: fr
-#      - name: Adding README - Spanish
-#        uses: dephraiim/translate-readme@main
-#        with:
-#          LANG: es
\ No newline at end of file
+name: Translate README
+
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      # ISO Langusge Codes: https://cloud.google.com/translate/docs/languages
+      - name: Adding README - English
+        uses: dephraiim/translate-readme@main
+        with:
+          LANG: en
+      - name: Adding README - Japanese
+        uses: dephraiim/translate-readme@main
+        with:
+          LANG: ja
+      - name: Adding README - German
+        uses: dephraiim/translate-readme@main
+        with:
+          LANG: de
+      - name: Adding README - French
+        uses: dephraiim/translate-readme@main
+        with:
+          LANG: fr
+      - name: Adding README - Spanish
+        uses: dephraiim/translate-readme@main
+        with:
+          LANG: es
\ No newline at end of file
diff --git a/README.md b/README.md
index c8f2e66..1ebde27 100644
--- a/README.md
+++ b/README.md
@@ -33,11 +33,11 @@
 
 Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/)
 
-~~Vercel:  [http://dy.ttentau.top/](http://dy.ttentau.top/) (中国推荐访问这个)~~
+[//]: # (Vercel:  [http://dy.ttentau.top/]&#40;http://dy.ttentau.top/&#41; &#40;中国推荐访问这个&#41;~~)
 
-~~Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/) (中国以外地区推荐访问这个)~~
+[//]: # (Netlify: [https://douyins.netlify.app/]&#40;https://douyins.netlify.app/&#41; &#40;中国以外地区推荐访问这个&#41;~~)
 
-Vercel和Netlify分别送的100G免费流量已经用完了...
+Vercel和Netlify分别送的100G免费流量已经用完了...🤣
 
 Android Apk: https://github.com/zyronon/douyin/releases