MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: refactor code and add comment

Browse Source
This commit is contained in:
zyronon 2024-04-19 02:18:54 +08:00
parent 866bf6207d
commit 76e2020335
9 changed files with 159 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/UserPanel.vue
View File

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

22
src/components/slide/SlideAlbum.vue
View File

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

55
src/components/slide/SlideHorizontal.vue
View File

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

32
src/components/slide/SlideVertical.vue
View File

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

33
src/components/slide/SlideVerticalInfinite.vue
View File

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

6
src/pages/home/index.vue
View File

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

4
src/pages/home/slide/Community.vue
View File

@ -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': [
{

2
src/pages/home/slide/SlideList.vue
View File

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

121
src/utils/slide.js
View File

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