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-07 21:09:21 +08:00
parent 59abb3ad50
commit f07411eee6
3 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/slide/SlideItem.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="base-slide-item" ref="slideItem">
<div class="base-slide-item">
<slot></slot>
</div>
</template>
@ -11,7 +11,7 @@ export default {
</script>
<style scoped lang="scss">
#base-slide-item {
.base-slide-item {
min-width: 100vw;
min-height: 100vh;
position: relative;

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

@ -1,13 +1,20 @@
<template>
<div id="home-index">
<SlideListVirtual direction="column"
ref="ssss"
:virtual="true"
:virtual="false"
: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"/>
@ -360,19 +367,20 @@ export default {
t(e) {
console.log(e)
},
end(){
end() {
console.log('end')
setTimeout(()=>{
[{
videoUrl: mp40,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
setTimeout(() => {
[
{
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',
@ -416,7 +424,8 @@ export default {
].map(v => {
this.videos.push(v)
})
},5000)
console.log('ok')
}, 1000)
}
}

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

@ -70,15 +70,27 @@ export default {
// console.log('activeIndex')
// this.changeIndex()
},
// list(){
//
// }
watchList: {
handler(newVal, oldVal) {
console.log(newVal)
console.log(oldVal)
},
deep: true
}
},
computed: {
//包装下，不然后watch里面监听到的新值和旧值是一样的，麻了
watchList() {
return [...this.list]
}
},
mounted: async function () {
this.slideList = this.$refs.slideList
this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, index))
})
if (this.virtual) {
this.slideList = this.$refs.slideList
this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, index))
})
}
await this.checkChildren()
this.changeIndex(true)
},
@ -192,19 +204,12 @@ export default {
if (this.slideItems.length < this.defaultVirtualItemTotal) {
this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
}
// console.log('this.currentSlideItemIndex', this.currentSlideItemIndex)
// console.log('this.slideItems.length >= this.defaultVirtualItemTotal',this.slideItems.length >= this.defaultVirtualItemTotal)
// console.log('this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2', this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2)
// console.log('this.currentSlideItemIndex <= this.list.length - 3', this.currentSlideItemIndex <= this.list.length - 3)
// console.log(this.slideItems.length >= this.defaultVirtualItemTotal
// && this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
// && this.currentSlideItemIndex <= this.list.length - 3)
if (this.slideItems.length >= this.defaultVirtualItemTotal
&& this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
&& this.currentSlideItemIndex <= this.list.length - 3
) {
let res = $(`#base-slide-list .base-slide-item[data-index=${addItemIndex}]`)
console.log(res)
// console.log(res)
if (res.length === 0) {
this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
@ -215,17 +220,16 @@ export default {
}
}
} else {
// if (this.currentSlideItemIndex > 1) {
// let item = this.list[this.currentSlideItemIndex - 2]
// this.slideList.prepend(this.getInsEl(item, this.currentSlideItemIndex - 2))
// this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
// // $("#base-slide-list .base-slide-item:last").remove()
// $(".base-slide-item").each(function () {
// $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
// })
// }
if (this.currentSlideItemIndex > 1 && this.currentSlideItemIndex <= this.list.length - 4) {
let addItemIndex = this.currentSlideItemIndex - 2
this.slideList.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex))
this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
// $("#base-slide-list .base-slide-item:last").remove()
$(".base-slide-item").each(function () {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
})
}
}
this.checkChildren()
}
}