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 18:12:28 +08:00
parent 2cf9ad20fa
commit 59abb3ad50
1 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,10 @@ export default {
return []
}
},
defaultVirtualItemTotal: {
type: Number,
default: () => 5
},
activeIndex: {
type: Number,
default: () => 0
@ -72,7 +76,7 @@ export default {
},
mounted: async function () {
this.slideList = this.$refs.slideList
this.list.slice(0, 3).map((item, index) => {
this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, index))
})
await this.checkChildren()
@ -173,45 +177,55 @@ export default {
if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
if (gapTime < 150) {
if (this.isDrawDown) {
this.currentSlideItemIndex += 1
} else {
this.currentSlideItemIndex -= 1
}
// console.log(this.slideItems.length)
let that = this
if (this.virtual) {
if (this.slideItems.length > 4) {
if (this.isDrawDown) {
if (this.currentSlideItemIndex > 2) {
let item = this.list[this.currentSlideItemIndex + 2]
this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
if (this.isDrawDown) {
let addItemIndex = this.currentSlideItemIndex + 2
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)
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()
// $("#base-slide-list .base-slide-item:first").remove()
$(".base-slide-item").each(function () {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
})
}
} else {
if (this.currentSlideItemIndex > 1) {
let item = this.list[this.currentSlideItemIndex - 2]
this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
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)
})
}
}
} else {
if (this.isDrawDown) {
// let res = $(`#base-slide-list .base-slide-item[data-index=${this.currentSlideItemIndex + 2}]`)
// console.log(res)
let item = this.list[this.currentSlideItemIndex + 2]
this.slideList.appendChild(this.getInsEl(item, this.currentSlideItemIndex + 2))
}
// 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)
// })
// }
}
this.checkChildren()
}
}