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/](http://dy.ttentau.top/) (中国推荐访问这个)~~) -~~Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/) (中国以外地区推荐访问这个)~~ +[//]: # (Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/) (中国以外地区推荐访问这个)~~) -Vercel和Netlify分别送的100G免费流量已经用完了... +Vercel和Netlify分别送的100G免费流量已经用完了...🤣 Android Apk: https://github.com/zyronon/douyin/releases diff --git a/src/App.vue b/src/App.vue index 4b8c79d..575b7f4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,16 +6,16 @@ - -
- -
-

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

-

1. 按 F12 调出控制台

-

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

-
- -
+ + + + + + + + + + diff --git a/src/components/slide/SlideVertical.vue b/src/components/slide/SlideVertical.vue index 00434b6..f5d66fd 100644 --- a/src/components/slide/SlideVertical.vue +++ b/src/components/slide/SlideVertical.vue @@ -2,13 +2,13 @@ import { onMounted, reactive, ref, watch } from 'vue' import GM from '../../utils' import { - getSlideDistance, + getSlideOffset, slideInit, slideReset, slideTouchEnd, - slideTouchMove, - slideTouchStart -} from './common' + slidePointerMove, + slidePointerDown +} from '@/utils/slide' import { SlideType } from '@/utils/const_var' const props = defineProps({ @@ -26,9 +26,10 @@ 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, @@ -49,34 +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) } function touchEnd(e) { - slideTouchEnd(e, state, canNext, null, null, SlideType.VERTICAL) - slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit) -} - -function canNext(isNext) { - return !( - (state.localIndex === 0 && !isNext) || - (state.localIndex === state.wrapper.childrenLength - 1 && isNext) - ) + slideTouchEnd(e, state) + slideReset(wrapperEl.value, state, emit) } diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue index 5159db2..58909e3 100644 --- a/src/components/slide/SlideVerticalInfinite.vue +++ b/src/components/slide/SlideVerticalInfinite.vue @@ -2,13 +2,13 @@ import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue' import GM from '../../utils' import { - getSlideDistance, + getSlideOffset, slideInit, slideReset, slideTouchEnd, - slideTouchMove, - slideTouchStart -} from './common' + slidePointerMove, + slidePointerDown +} from '@/utils/slide' import { SlideType } from '@/utils/const_var' import SlideItem from '@/components/slide/SlideItem.vue' import bus, { EVENT_KEY } from '../../utils/bus' @@ -62,6 +62,8 @@ 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, @@ -168,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) @@ -228,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) { @@ -245,89 +243,77 @@ function touchEnd(e) { ) { emit('refresh') } - 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') + 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 - ) - slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit) + 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/components/slide/common.js b/src/components/slide/common.js deleted file mode 100644 index 90790ce..0000000 --- a/src/components/slide/common.js +++ /dev/null @@ -1,163 +0,0 @@ -import bus from '@/utils/bus' -import Utils from '@/utils' -import GM from '@/utils' -import { SlideType } from '@/utils/const_var' -import { nextTick } from 'vue' - -export function slideInit(el, state, type) { - 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 dx1 = 0, - dx2 = 0 - if (type === SlideType.HORIZONTAL) dx1 = t - else dx2 = t - Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`) -} - -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.start.time = Date.now() -} - -//检测能否滑动 -export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) { - if (state.needCheck) { - if (Math.abs(state.move.x) > judgeValue || Math.abs(state.move.y) > judgeValue) { - let angle = (Math.abs(state.move.x) * 10) / (Math.abs(state.move.y) * 10) - state.next = type === SlideType.HORIZONTAL ? angle > 1 : angle <= 1 - // console.log('angle', angle, state.next) - state.needCheck = false - } else { - return false - } - } - return state.next -} - -/** - * @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式 - * */ -export function slideTouchMove( - e, - el, - state, - judgeValue, - canNextCb, - nextCb, - type = SlideType.HORIZONTAL, - notNextCb, - slideOtherDirectionCb = null -) { - state.move.x = e.touches[0].pageX - state.start.x - state.move.y = e.touches[0].pageY - state.start.y - - let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0 - - let canSlideRes = canSlide(state, judgeValue, type) - - if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) { - bus.emit(state.name + '-moveY', state.move.y) - } - - if (canSlideRes) { - if (canNextCb?.(isNext, e)) { - nextCb?.() - if (type === SlideType.HORIZONTAL) { - bus.emit(state.name + '-moveX', state.move.x) - } - Utils.$stopPropagation(e) - let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue) - let dx1 = 0 - let dx2 = 0 - if (type === SlideType.HORIZONTAL) { - dx1 = t + state.move.x - } else { - dx2 = t + state.move.y - } - Utils.$setCss(el, 'transition-duration', `0ms`) - Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`) - } else { - notNextCb?.() - } - } else { - slideOtherDirectionCb?.(e) - } -} - -export function slideTouchEnd( - e, - state, - canNextCb, - nextCb, - doNotNextCb, - type = SlideType.HORIZONTAL -) { - let isHorizontal = 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) - 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-- - } - return nextCb?.(isNext) - } - } - doNotNextCb?.() -} - -export function slideReset(el, state, type, emit) { - Utils.$setCss(el, 'transition-duration', `300ms`) - let t = getSlideDistance(state, type, el) - let dx1 = 0 - let dx2 = 0 - if (type === SlideType.HORIZONTAL) { - bus.emit(state.name + '-end', state.localIndex) - dx1 = t - } else { - bus.emit(state.name + '-end') - dx2 = t - } - Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`) - state.start.x = state.start.y = state.start.time = state.move.x = state.move.y = 0 - state.next = false - state.needCheck = true - emit?.('update:index', state.localIndex) -} - -export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) { - if (type === SlideType.HORIZONTAL) { - //TODO 统一 - if (el) { - let widths = [] - Array.from(el.children).map((v) => { - widths.push(v.getBoundingClientRect().width) - }) - widths = widths.slice(0, state.localIndex) - if (widths.length) { - return -widths.reduce((a, b) => a + b) - } - return 0 - } - return -state.localIndex * state.wrapper.width - } else { - return -state.localIndex * state.wrapper.height - } -} 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 @@