From e0990c78e30c8891b5a04aeff212cd54b3aee7e6 Mon Sep 17 00:00:00 2001 From: zyronon Date: Wed, 8 Feb 2023 01:15:44 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/slide/BVideo.vue | 7 +- src/components/slide/SlideAlbum.vue | 39 +++-- src/pages/slide/IndicatorHome.vue | 9 +- src/pages/slideHooks/VInfinite.vue | 80 +++++---- src/pages/slideHooks/index.vue | 250 ++++++++++++++++------------ src/utils/bus.js | 5 +- 6 files changed, 234 insertions(+), 156 deletions(-) diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue index 235a12c..0983c6a 100644 --- a/src/components/slide/BVideo.vue +++ b/src/components/slide/BVideo.vue @@ -222,7 +222,7 @@ export default { // eventTester("durationchange", '资源长度改变'); //资源长度改变 // eventTester("volumechange", '音量改变'); //音量改变 - console.log('mounted') + // console.log('mounted') // bus.off('singleClickBroadcast') bus.on(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click) bus.on(EVENT_KEY.DIALOG_MOVE, this.onDialogMove) @@ -233,13 +233,14 @@ export default { bus.on(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType) }, unmounted() { - console.log('unmounted') + // console.log('unmounted') bus.off(EVENT_KEY.SINGLE_CLICK_BROADCAST, this.click) bus.off(EVENT_KEY.DIALOG_MOVE, this.onDialogMove) bus.off(EVENT_KEY.DIALOG_END, this.onDialogEnd) bus.off(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments) bus.off(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments) - bus.off(EVENT_KEY.OPEN_SUB_TYPE, this.onCloseSubType) + bus.off(EVENT_KEY.OPEN_SUB_TYPE, this.onOpenSubType) + bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType) }, methods: { onOpenSubType({index, height}) { diff --git a/src/components/slide/SlideAlbum.vue b/src/components/slide/SlideAlbum.vue index ed05d1b..d9a74b1 100644 --- a/src/components/slide/SlideAlbum.vue +++ b/src/components/slide/SlideAlbum.vue @@ -6,21 +6,20 @@ @touchstart.passive="touchStart" @touchmove="touchMove" @touchend="touchEnd"> -
+
@@ -31,7 +30,7 @@ @touchmove="progressBarTouchMove" @touchend="progressBarTouchMEnd" > -
+
@@ -41,12 +40,12 @@
- {{ state.localIndex + 1 }} / {{ props.modelValue.imgs.length }} + {{ state.localIndex + 1 }} / {{ props.item.imgs.length }}
@@ -67,7 +66,7 @@ import enums from "../../utils/enums"; import Utils from '../../utils' import {mat4} from 'gl-matrix' -import {onMounted, onBeforeUpdate, reactive, ref, watch, computed} from "vue"; +import {onMounted, onBeforeUpdate, reactive, ref, watch, computed, provide} from "vue"; import { getSlideDistance, slideInit, @@ -97,8 +96,11 @@ let ov = new Float32Array([ ]); let origin = cloneDeep(ov) const rectMap = new Map() + +// provide('isPlaying', computed(() => this.isPlaying)) +provide('isPlaying', false) const props = defineProps({ - modelValue: { + item: { type: Object, default() { return { @@ -197,7 +199,13 @@ const props = defineProps({ } } } - } + }, + position: { + type: Object, + default: () => { + return {} + } + }, }) const judgeValue = 20 const wrapperEl = ref(null) @@ -228,6 +236,7 @@ const state = reactive({ status: 'play',//stop,custom progress: 0, cycleFn: null, + localItem: props.item, }) onMounted(() => { @@ -236,7 +245,7 @@ onMounted(() => { state.cycleFn = () => { return if (state.status !== 'play') return cancelAnimationFrame(state.cycleFn) - if (state.progress < props.modelValue.imgs.length * 100) { + if (state.progress < props.item.imgs.length * 100) { state.progress += .4 state.localIndex = parseInt(state.progress / 100) if (wrapperEl.value) { @@ -455,7 +464,7 @@ function setItemRef(el, key) { } function canNext(isNext, e) { - let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.modelValue.imgs.length - 1 && isNext)); + let res = !((state.localIndex === 0 && !isNext) || (state.localIndex === props.item.imgs.length - 1 && isNext)); if (!res && state.operationStatus === SlideAlbumOperationStatus.Detail && e) { Utils.$stopPropagation(e) } diff --git a/src/pages/slide/IndicatorHome.vue b/src/pages/slide/IndicatorHome.vue index 5c74a85..c7a3868 100644 --- a/src/pages/slide/IndicatorHome.vue +++ b/src/pages/slide/IndicatorHome.vue @@ -131,6 +131,11 @@ export default { }) bus.on(this.name + '-end', this.end) }, + unmounted() { + bus.off(this.name + '-moveX', this.move) + bus.off(this.name + '-moveY',) + bus.off(this.name + '-end', this.end) + }, methods: { toggleType(type) { if (type !== this.type) { @@ -158,14 +163,14 @@ export default { this.lefts.push( item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (tabWidth * 0.5 - indicatorWidth / 2)) } - this.indicatorSpace = this.lefts[1] - this.lefts[this.index] + this.indicatorSpace = this.lefts[1] - this.lefts[0] this.$setCss(this.indicatorRef, 'transition-duration', `300ms`) this.$setCss(this.indicatorRef, 'left', this.lefts[this.index] + 'px') }, move(e) { this.$setCss(this.indicatorRef, 'transition-duration', `0ms`) this.$setCss(this.indicatorRef, 'left', - this.lefts[this.index] + + this.lefts[this.index] - e / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px') }, end(index) { diff --git a/src/pages/slideHooks/VInfinite.vue b/src/pages/slideHooks/VInfinite.vue index dcf90f1..e2f7568 100644 --- a/src/pages/slideHooks/VInfinite.vue +++ b/src/pages/slideHooks/VInfinite.vue @@ -6,6 +6,7 @@ import {SlideType} from "../../utils/const_var"; import SlideItem from './SlideItem' import bus from "../../utils/bus"; import {useStore} from 'vuex' +import Utils from "../../utils"; const props = defineProps({ index: { @@ -41,10 +42,10 @@ const props = defineProps({ default: () => '' }, }) -const emit = defineEmits(['update:index']) +const emit = defineEmits(['update:index', 'loadMore']) const appInsMap = new Map() -const slideItemClassName = 'slide-item2' +const itemClassName = 'slide-item2' const wrapperEl = ref(null) const state = reactive({ name: props.name, @@ -60,14 +61,33 @@ const homeRefresh = computed(() => store.state.homeRefresh) const judgeValue = computed(() => store.state.judgeValue) watch( - () => props.index, - (newVal) => { - if (state.localIndex !== newVal) { - state.localIndex = newVal - GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`) - GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`) + () => props.list, + (newVal, oldVal) => { + // console.log('watch', newVal.length, oldVal.length, props.list) + //新数据比老数据小或等于，是刷新 + if (newVal.length <= oldVal.length) { + insertContent() + } else { + if (oldVal.length === 0) { + insertContent() + } else { + let end = oldVal.length + 3 + if (end >= newVal) end = newVal + let top = $(wrapperEl.value).find(`.${itemClassName}:last`).css('top') + + newVal.slice(oldVal.length, end).map((item, index) => { + let el = getInsEl(item, oldVal.length + index) + //这里必须要设置个top值，不然会把前面的条目给覆盖掉 + //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值， + //因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还 + // 计算top值的，会和前面的对不上 + $(el).css('top', top) + wrapperEl.value.appendChild(el) + state.wrapper.childrenLength++ + }) + } } - } + }, ) onMounted(() => { @@ -77,15 +97,16 @@ onMounted(() => { //默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新 function insertContent(list = props.list) { + $(wrapperEl.value).empty() + let half = (props.virtualTotal - 1) / 2 let start = 0 - - if (state.localIndex >= (props.virtualTotal - 1) / 2) { - start = state.localIndex - (props.virtualTotal - 1) / 2 + if (state.localIndex >= half) { + start = state.localIndex - half } - let end = start + 5 + let end = start + props.virtualTotal if (end >= list.length) { end = list.length - start = end - 5 + start = end - props.virtualTotal } if (start < 0) start = 0 list.slice(start, end).map( @@ -95,11 +116,10 @@ function insertContent(list = props.list) { wrapperEl.value.appendChild(el) } ) - GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px, - ${-state.localIndex * state.wrapper.height}px, 0px)`) + GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,${getSlideDistance(state, SlideType.VERTICAL)}px, 0px)`) if (state.localIndex > 2 && list.length > 5) { - $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () { + $(wrapperEl.value).find(`.${itemClassName}`).each(function () { if ((list.length - state.localIndex) > 2) { $(this).css('top', (state.localIndex - 2) * state.wrapper.height) } else { @@ -125,7 +145,6 @@ function getInsEl(item, index, play = false) { return ins.$el } - function touchStart(e) { slideTouchStart(e, wrapperEl.value, state) } @@ -137,13 +156,16 @@ function touchMove(e) { function touchEnd(e) { let isNext = state.move.y < 0 if (state.localIndex === 0 && !isNext && state.move.y > (homeRefresh.value + judgeValue.value)) { - console.log('loading') - // bus.emit(props.prefix + '-loading') + emit('refresh') } slideTouchEnd(e, state, canNext, (isNext) => { if (isNext) { + let half = (props.virtualTotal + 1) / 2 + if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) { + emit('loadMore') + } let addItemIndex = state.localIndex + 2 - let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`) + 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)) @@ -155,15 +177,15 @@ function touchEnd(e) { ) { if (res.length === 0) { wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex)) - appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:first`).data('index')).unmount() + appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index')).unmount() // $(wrapperEl.value).find(".base-slide-item:first").remove() - $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () { + $(wrapperEl.value).find(`.${itemClassName}`).each(function () { $(this).css('top', (state.localIndex - 2) * state.wrapper.height) }) } } if (state.wrapper.childrenLength > props.virtualTotal) { - $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () { + $(wrapperEl.value).find(`.${itemClassName}`).each(function () { let index = $(this).data('index') if (index < (state.localIndex - 2)) { appInsMap.get(index).unmount() @@ -173,21 +195,21 @@ function touchEnd(e) { } } else { let addItemIndex = state.localIndex - 2 - let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`) + 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(`.${slideItemClassName}:last`).data('index')).unmount() + appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount() // $(wrapperEl.value).find(".base-slide-item:last").remove() - $(wrapperEl.value).find(`.${slideItemClassName}`).each(function () { + $(wrapperEl.value).find(`.${itemClassName}`).each(function () { $(this).css('top', (state.localIndex - 2) * state.wrapper.height) }) } } if (state.wrapper.childrenLength > props.virtualTotal) { - appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount() + appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount() } } @@ -198,7 +220,7 @@ function touchEnd(e) { function canNext(isNext) { - return !((state.localIndex === 0 && !isNext) || (state.localIndex === state.wrapper.childrenLength - 1 && isNext)); + return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext)); } diff --git a/src/pages/slideHooks/index.vue b/src/pages/slideHooks/index.vue index 267b8de..e3b0635 100644 --- a/src/pages/slideHooks/index.vue +++ b/src/pages/slideHooks/index.vue @@ -1,109 +1,113 @@