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

优化首页视频播放逻辑

Browse Source
This commit is contained in:
zyronon 2021-07-08 12:36:31 +08:00
parent f07411eee6
commit 67059981d7
2 changed files with 79 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/pages/home/Index2.vue
View File

@ -1,20 +1,14 @@
<template>
<div id="home-index">
<SlideListVirtual direction="column"
:virtual="false"
:list="videos"
:renderSlide="render"
v-model:active-index="videoActiveIndex"
@end="end"
<SlideListVirtual
ref="slideList"
direction="column"
:virtual="true"
:list="videos"
:renderSlide="render"
v-model:active-index="videoActiveIndex"
@end="end"
>
<SlideItem v-for="(item,index) of videos">
<Video1
v-model:video="videos[index]"
@showComments="isCommenting = !isCommenting"
@showShare="isSharing = !isSharing"
@goUserInfo="baseActiveIndex = 1"
></Video1>
</SlideItem>
</SlideListVirtual>
<Comment v-model:is-commenting="isCommenting"/>
<Share v-model:is-sharing="isSharing" ref="share"/>
@ -302,16 +296,17 @@ export default {
})
// if (newVal >= this.videos.length - 3) {
if (false) {
[{
videoUrl: mp40,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
[
{
videoUrl: mp40,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp41,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
@ -381,49 +376,51 @@ export default {
shared: 999,
duration: 99
},
{
videoUrl: mp41,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp42,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp43,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp44,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
// {
// videoUrl: mp41,
// // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
// videoPoster: src1Bg,
// isLoved: true,
// loves: 1234,
// comments: 666,
// shared: 999,
// duration: 99
// },
// {
// videoUrl: mp42,
// // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
// videoPoster: src1Bg,
// isLoved: false,
// loves: 1234,
// comments: 666,
// shared: 999,
// duration: 99
// },
// {
// videoUrl: mp43,
// // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
// videoPoster: src1Bg,
// isLoved: false,
// loves: 1234,
// comments: 666,
// shared: 999,
// duration: 99
// },
// {
// videoUrl: mp44,
// // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
// videoPoster: src1Bg,
// isLoved: false,
// loves: 1234,
// comments: 666,
// shared: 999,
// duration: 99
// },
].map(v => {
this.videos.push(v)
})
this.$refs.slideList.checkChildren()
console.log('ok')
}, 1000)
}

20
src/pages/home/SlideListVirtual.vue
View File

@ -72,8 +72,24 @@ export default {
},
watchList: {
handler(newVal, oldVal) {
console.log(newVal)
console.log(oldVal)
console.log(this.currentSlideItemIndex)
let endLength = newVal.length
if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
}
let that = this
newVal.slice(oldVal.length, endLength).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
// $("#base-slide-list .base-slide-item:first").remove()
$(".base-slide-item").each(function () {
$(this).css('top',
((endLength - oldVal.length) > 1 ?
(that.currentSlideItemIndex - 2) :
(that.currentSlideItemIndex - 3)) *
that.wrapperHeight)
})
})
},
deep: true
}