diff --git a/src/components/slide/BVideo.vue b/src/components/slide/BVideo.vue index 6b4699f..6b3d1ad 100644 --- a/src/components/slide/BVideo.vue +++ b/src/components/slide/BVideo.vue @@ -282,8 +282,13 @@ export default { this.commentVisible = false } }, - click({id, type}) { - if (this.item.id === id) { + click({baseIndex, navIndex, itemIndex, type}) { + // console.log(baseIndex, navIndex, itemIndex, this.position) + if ( + this.position.baseIndex === baseIndex && + this.position.navIndex === navIndex && + this.position.itemIndex === itemIndex + ) { if (type === EVENT_KEY.ITEM_TOGGLE) { if (this.status === SlideItemPlayStatus.Play) { this.pause() diff --git a/src/components/slide/SlideVerticalInfinite.vue b/src/components/slide/SlideVerticalInfinite.vue index 18f4269..47a2e98 100644 --- a/src/components/slide/SlideVerticalInfinite.vue +++ b/src/components/slide/SlideVerticalInfinite.vue @@ -44,7 +44,7 @@ const props = defineProps({ const emit = defineEmits(['update:index', 'loadMore']) const appInsMap = new Map() -const itemClassName = 'slide-item2' +const itemClassName = 'slide-item' const wrapperEl = ref(null) const state = reactive({ name: props.name, @@ -91,14 +91,16 @@ watch( watch( () => props.index, (newVal, oldVal) => { - // console.log('watch-index', newVal, oldVal, props.list[newVal].id) + // console.log('watch-index', newVal, oldVal,props.list, props.list[newVal].id) bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { - id: props.list[newVal].id, + ...props.position, + itemIndex: newVal, type: EVENT_KEY.ITEM_PLAY }) setTimeout(() => { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { - id: props.list[oldVal].id, + ...props.position, + itemIndex: oldVal, type: EVENT_KEY.ITEM_STOP }) }, 200) @@ -110,7 +112,6 @@ onMounted(() => { insertContent() }) -//默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新 function insertContent(list = props.list) { $(wrapperEl.value).empty() let half = (props.virtualTotal - 1) / 2 @@ -155,7 +156,7 @@ function dislike(item) { defineExpose({dislike}) function getInsEl(item, index, play = false) { - console.log('index', index, play) + // console.log('index', index, play) let slideVNode = props.render(item, index, play, props.position) const app = createApp({ render() { diff --git a/src/components/slide/common.js b/src/components/slide/common.js index b5d8e96..8267367 100644 --- a/src/components/slide/common.js +++ b/src/components/slide/common.js @@ -44,7 +44,6 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type let canSlideRes = canSlide(state, judgeValue, type) - //当 if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) { bus.emit(state.name + '-moveY', state.move.y) } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 63d8c48..cb008df 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -5,19 +5,17 @@ - -
+
- +
@@ -62,23 +60,23 @@ v-if="state.subType===-1 && !state.subTypeVisible" @click="showSubType">附近吃喝玩乐
+ - + @loadMore="loadSlide1More" + @refresh="() => getSlide0Data(true)" + /> @@ -90,19 +88,20 @@ + @@ -187,7 +186,7 @@ import BVideo from "../../components/slide/BVideo.vue"; import Comment from "../../components/Comment.vue"; import Share from "../../components/Share.vue"; import IndicatorHome from "./components/IndicatorHome.vue"; -import {computed, onMounted, onUnmounted, reactive, ref} from "vue"; +import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue"; import bus, {EVENT_KEY} from "../../utils/bus"; import {useNav} from "@/utils/hooks/useNav"; import Utils from "@/utils"; @@ -205,6 +204,7 @@ import ShareToFriend from "@/pages/home/components/ShareToFriend.vue"; import UserPanel from "@/components/UserPanel.vue"; import Community from "@/pages/home/components/Community.vue"; import Shop from "@/pages/home/components/Shop.vue"; +import Loading from "@/components/Loading.vue"; const nav = useNav() @@ -221,9 +221,49 @@ const subTypeRef = ref(null) const recommendListRef = ref(null) const state = reactive({ baseIndex: 0, - navIndex: 4, - itemIndex: 0, + navIndex: 0, test: '', + slide0: { + loading: false, + index: 0, + list: [], + totalSize: 0, + pageSize: 10, + pageNo: 0, + }, + slide1: { + loading: false, + index: 0, + list: [], + totalSize: 0, + pageSize: 10, + pageNo: 0, + }, + slide2: { + loading: false, + index: 0, + list: [], + totalSize: 0, + pageSize: 10, + pageNo: 0, + }, + slide3: { + loading: false, + index: 0, + list: [], + totalSize: 0, + pageSize: 10, + pageNo: 0, + }, + slide4: { + loading: false, + index: 0, + list: [], + totalSize: 0, + pageSize: 10, + pageNo: 0, + }, + slideOneList: [], recommendList: [ // { // type: 'img', @@ -240,7 +280,6 @@ const state = reactive({ ], isSharing: false, canMove: true, - loading: false, shareType: -1, @@ -262,36 +301,90 @@ const state = reactive({ subTypeHeight: '0', //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType. subTypeIsTop: false, - totalSize: 0, - pageSize: 10, - pageNo: 0, }) -async function getData(refresh = false) { - // if (process.env.NODE_ENV !== 'development') { - // state.totalSize = 11 - // return state.recommendVideos = resource.videos - // } - if (state.loading) return - state.loading = true - let res = await api.videos.recommended({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize}) - console.log('loadMore-', 'refresh', refresh, res) - state.loading = false - if (res.code === 200) { - state.totalSize = res.data.total - if (refresh) { - state.recommendList = [] - } - state.recommendList = state.recommendList.concat(res.data.list) - } else { - state.pageNo-- +const loading = computed(() => { + return state[`slide${state.navIndex}`].loading +}) + +watch( + () => state.navIndex, + (newVal, oldValue) => { + if (newVal === 0 && state.slide0.list.length === 0) { + return getSlide0Data() + } + if (newVal === 4 && state.slide4.list.length === 0) { + return getSlide4Data() + } + if (newVal === 2) return + if ([0, 2, 4].includes(newVal)) { + let playItemIndex = state[`slide${newVal}`].index + bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { + baseIndex: state.baseIndex, + navIndex: newVal, + itemIndex: playItemIndex, + type: EVENT_KEY.ITEM_TOGGLE + }) + } + if ([0, 2, 4].includes(oldValue)) { + let stopItemIndex = state[`slide${oldValue}`].index + setTimeout(() => { + bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { + baseIndex: state.baseIndex, + navIndex: oldValue, + itemIndex: stopItemIndex, + type: EVENT_KEY.ITEM_STOP + }) + }, 200) + } + + }) + +function loadSlide1More() { + if (!state.loading) { + state.slide0.pageNo++ + getSlide0Data() } } -function loadMore() { +async function getSlide0Data(refresh = false) { + if (state.slide0.loading) return + state.slide0.loading = true + let res = await api.videos.recommended({pageNo: refresh ? 0 : state.slide0.pageNo, pageSize: state.slide0.pageSize}) + console.log('getSlide0Data-', 'refresh', refresh, res) + state.slide0.loading = false + if (res.code === 200) { + state.slide0.totalSize = res.data.total + if (refresh) { + state.slide0.list = [] + } + state.slide0.list = state.slide0.list.concat(res.data.list) + } else { + state.slide0.pageNo-- + } +} + +async function getSlide4Data(refresh = false) { + if (state.slide4.loading) return + state.slide4.loading = true + let res = await api.videos.recommended({pageNo: refresh ? 0 : state.slide4.pageNo, pageSize: state.slide4.pageSize}) + console.log('getSlide4Data-', 'refresh', refresh, res) + state.slide4.loading = false + if (res.code === 200) { + state.slide4.totalSize = res.data.total + if (refresh) { + state.slide4.list = [] + } + state.slide4.list = state.slide4.list.concat(res.data.list) + } else { + state.slide4.pageNo-- + } +} + +function loadSlide4More() { if (!state.loading) { state.pageNo++ - getData() + getSlide4Data() } } @@ -330,13 +423,22 @@ function end() { } onMounted(() => { - getData() + // getData() + getSlide0Data() bus.on(EVENT_KEY.SINGLE_CLICK, () => { - let id = '' + let itemIndex = -1 if (state.navIndex === 4) { - id = state.recommendList[state.itemIndex].id + itemIndex = state.slide4.index } - bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {id, type: EVENT_KEY.ITEM_TOGGLE}) + if (state.navIndex === 0) { + itemIndex = state.slide0.index + } + bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { + baseIndex: state.baseIndex, + navIndex: state.navIndex, + itemIndex, + type: EVENT_KEY.ITEM_TOGGLE + }) }) bus.on('update:item', val => { const {baseIndex, navIndex, itemIndex} = val.position @@ -422,7 +524,7 @@ function render(item, itemIndex, play, position) { height: calc(100vh - @footer-height) !important; overflow: hidden; - #slide1 { + #slide0 { position: relative; .sub-type { @@ -487,7 +589,7 @@ function render(item, itemIndex, play, position) { color: white; } - #slide1-infinite { + #slide0-infinite { z-index: 1; margin-top: 0; transition: height, margin-top .3s;