From db6a7b9aafdf37473fbbfb6cef4825de1482a988 Mon Sep 17 00:00:00 2001 From: zyronon Date: Mon, 22 Apr 2024 18:54:47 +0800 Subject: [PATCH 1/3] refactor: save --- src/App.vue | 21 +++-- src/components/BaseFooter.vue | 3 + src/components/Scroll.vue | 1 + src/components/UserPanel.vue | 3 +- src/components/slide/SlideAlbum.vue | 24 ++--- src/components/slide/SlideHorizontal.vue | 46 ++++----- src/components/slide/SlideVertical.vue | 47 ++++++---- .../slide/SlideVerticalInfinite.vue | 17 ++-- src/main.ts | 25 +++++ src/mock/index.ts | 80 ++++++++++++---- src/pages/home/index.vue | 1 + src/pages/home/slide/Community.vue | 4 +- src/pages/home/slide/LongVideo.vue | 4 +- src/pages/other/AlbumDetail.vue | 5 +- src/utils/{slide.js => slide.ts} | 94 +++++++++++++------ 15 files changed, 256 insertions(+), 119 deletions(-) rename src/utils/{slide.js => slide.ts} (77%) diff --git a/src/App.vue b/src/App.vue index 289a969..1d33528 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,16 +6,16 @@ - -
- -
-

切换至手机模式才可正常使用

-

1. 按 F12 调出控制台

-

2. 按 Ctrl+Shift+M，或点击下面图标

-
- + +
+ +
+

切换至手机模式才可正常使用

+

1. 按 F12 调出控制台

+

2. 按 Ctrl+Shift+M，或点击下面图标

+ +
@@ -127,9 +131,9 @@ function touchEnd(e: TouchEvent) {
@@ -141,16 +145,16 @@ function touchEnd(e: TouchEvent) { position: absolute; bottom: 10rem; z-index: 2; - left: 0; + left: 50%; + transform: translateX(-50%); display: flex; justify-content: center; - width: 100%; + gap: 7rem; .bullet { @width: 5rem; width: @width; height: @width; - margin: 0 3rem; border-radius: 50%; background: var(--second-btn-color); diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue index f5d66fd..acfef10 100644 --- a/src/components/slide/SlideVertical.vue +++ b/src/components/slide/SlideVertical.vue @@ -6,8 +6,8 @@ import { slideInit, slideReset, slideTouchEnd, - slidePointerMove, - slidePointerDown + slideTouchMove, + slideTouchStart } from '@/utils/slide' import { SlideType } from '@/utils/const_var' @@ -22,21 +22,34 @@ const props = defineProps({ changeActiveIndexUseAnim: { type: Boolean, default: true + }, + name: { + type: String, + default: () => 'SlideVertical' } }) const emit = defineEmits(['update:index']) +//slide-list的ref引用 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 } + judgeValue: 20, //一个用于判断滑动朝向的固定值 + type: SlideType.VERTICAL, //组件类型 + name: props.name, + localIndex: props.index, //当前下标 + needCheck: true, //是否需要检测，每次按下都需要检测，up事件会重置为true + next: false, //能否滑动 + isDown: false, //是否按下，用于move事件判断 + start: { x: 0, y: 0, time: 0 }, //按下时的起点坐标 + move: { x: 0, y: 0 }, //移动时的坐标 + //slide-list的宽度和子元素数量 + wrapper: { + width: 0, + height: 0, + //childrenLength用于canNext方法判断当前页是否是最后一页，是则不能滑动，不捕获事件 + childrenLength: 0 + } }) watch( @@ -61,16 +74,16 @@ onMounted(() => { }) function touchStart(e) { - slidePointerDown(e, wrapperEl.value, state) + slideTouchStart(e, wrapperEl.value, state) } function touchMove(e) { - slidePointerMove(e, wrapperEl.value, state) + slideTouchMove(e, wrapperEl.value, state) } function touchEnd(e) { slideTouchEnd(e, state) - slideReset(wrapperEl.value, state, emit) + slideReset(e, wrapperEl.value, state, emit) } @@ -79,9 +92,9 @@ function touchEnd(e) {
diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue index 58909e3..4fecd13 100644 --- a/src/components/slide/SlideVerticalInfinite.vue +++ b/src/components/slide/SlideVerticalInfinite.vue @@ -6,8 +6,8 @@ import { slideInit, slideReset, slideTouchEnd, - slidePointerMove, - slidePointerDown + slideTouchMove, + slideTouchStart } from '@/utils/slide' import { SlideType } from '@/utils/const_var' import SlideItem from '@/components/slide/SlideItem.vue' @@ -68,6 +68,7 @@ const state = reactive({ localIndex: props.index, needCheck: true, next: false, + isDown: false, start: { x: 0, y: 0, time: 0 }, move: { x: 0, y: 0 }, wrapper: { width: 0, height: 0, childrenLength: 0 } @@ -226,12 +227,12 @@ function getInsEl(item, index, play = false) { } function touchStart(e) { - slidePointerDown(e, wrapperEl.value, state) + slideTouchStart(e, wrapperEl.value, state) } //TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减 function touchMove(e) { - slidePointerMove(e, wrapperEl.value, state, canNext) + slideTouchMove(e, wrapperEl.value, state, canNext) } function touchEnd(e) { @@ -310,7 +311,7 @@ function touchEnd(e) { state.wrapper.childrenLength = wrapperEl.value.children.length } }) - slideReset(wrapperEl.value, state, emit) + slideReset(e, wrapperEl.value, state, emit) } function canNext(state, isNext) { @@ -328,9 +329,9 @@ function canNext(state, isNext) { class="slide-list flex-direction-column" ref="wrapperEl" @click="null" - @touchstart="touchStart" - @touchmove="touchMove" - @touchend="touchEnd" + @pointerdown="touchStart" + @pointermove="touchMove" + @pointerup="touchEnd" >
diff --git a/src/main.ts b/src/main.ts index a5424aa..2c7b158 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,6 +8,31 @@ import mixin from './utils/mixin' import VueLazyload from '@jambonn/vue-lazyload' import { createPinia } from 'pinia' +HTMLElement.prototype._rawAddEventListener_ = HTMLElement.prototype.addEventListener +HTMLElement.prototype._rawRemoveEventListener_ = HTMLElement.prototype.removeEventListener +window.isMoved = false +HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, { + apply(target, ctx, args) { + const eventName = args[0] + const listener = args[1] + // console.log('e', eventName, '') + if (listener instanceof Function && eventName === 'click') { + args[1] = new Proxy(listener, { + apply(target, ctx, args) { + // console.log('点击', window.isMoved) + if (window.isMoved) return + try { + return target.apply(ctx, args) + } catch (e) { + console.error(`[proxyPlayerEvent][${eventName}]`, listener, e) + } + } + }) + } + return target.apply(ctx, args) + } +}) + const pinia = createPinia() const emitter = mitt() const app = createApp(App) diff --git a/src/mock/index.ts b/src/mock/index.ts index 92ed798..5c112a3 100644 --- a/src/mock/index.ts +++ b/src/mock/index.ts @@ -28,26 +28,74 @@ const t = [ type: 'imgs', src: `https://imgapi.cn/bing.php`, author: { - unique_id: 1 - } - }, - { - type: 'user', - src: `https://imgapi.cn/bing.php`, - author: { - unique_id: 2 - } - }, - { - type: 'img', - src: `https://imgapi.cn/bing.php`, - author: { - unique_id: 3 + unique_id: 1, + avatar_168x168: { + url_list: [] + }, + avatar_300x300: { + url_list: [] + }, + cover_url: [ + { + url_list: [] + } + ], + white_cover_url: [ + { + url_list: [] + } + ] } } + // { + // type: 'user', + // src: `https://imgapi.cn/bing.php`, + // author: { + // unique_id: 2, + // avatar_168x168: { + // url_list: [] + // }, + // avatar_300x300: { + // url_list: [] + // }, + // cover_url: [ + // { + // url_list: [] + // } + // ], + // white_cover_url: [ + // { + // url_list: [] + // } + // ] + // } + // }, + // { + // type: 'img', + // src: `https://imgapi.cn/bing.php`, + // author: { + // unique_id: 3, + // avatar_168x168: { + // url_list: [] + // }, + // avatar_300x300: { + // url_list: [] + // }, + // cover_url: [ + // { + // url_list: [] + // } + // ], + // white_cover_url: [ + // { + // url_list: [] + // } + // ] + // } + // } ] -// allRecommendVideos.unshift(...t) +allRecommendVideos.unshift(...t) // { // type: 'user-imgs', // src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`, diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 43d0a8b..18b725e 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -346,6 +346,7 @@ function dislike() { overflow: hidden; .sidebar { + touch-action: pan-y; width: 80vw; height: calc(var(--vh, 1vh) * 100); overflow: auto; diff --git a/src/pages/home/slide/Community.vue b/src/pages/home/slide/Community.vue index f835050..9b86318 100644 --- a/src/pages/home/slide/Community.vue +++ b/src/pages/home/slide/Community.vue @@ -1,5 +1,5 @@