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 @@