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 11:16:16 +08:00
parent b80f83f1a7
commit d2fa67d3ad
2 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,8 +39,8 @@ export default {
return { return {
videos: [ videos: [
{ {
videoUrl: mp40, // videoUrl: mp40,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: true, isLoved: true,
loves: 1234, loves: 1234,
@ -49,8 +49,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp41, // videoUrl: mp41,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/1.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: true, isLoved: true,
loves: 1234, loves: 1234,
@ -59,8 +59,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp42, // videoUrl: mp42,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/2.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -69,8 +69,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp43, // videoUrl: mp43,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/3.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -79,8 +79,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp44, // videoUrl: mp44,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/4.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -89,8 +89,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp45, // videoUrl: mp45,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/5.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -99,8 +99,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp46, // videoUrl: mp46,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/6.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -109,8 +109,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp47, // videoUrl: mp47,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/7.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -119,8 +119,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp48, // videoUrl: mp48,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/8.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -129,8 +129,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp49, // videoUrl: mp49,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/9.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,
@ -139,8 +139,8 @@ export default {
duration: 99 duration: 99
}, },
{ {
videoUrl: mp410, // videoUrl: mp410,
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/10.mp4',
videoPoster: src1Bg, videoPoster: src1Bg,
isLoved: false, isLoved: false,
loves: 1234, loves: 1234,

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

@ -89,6 +89,7 @@ export default {
const parent = document.createElement('div') const parent = document.createElement('div')
const ins = app.mount(parent) const ins = app.mount(parent)
this.appInsMap.set(index, app) this.appInsMap.set(index, app)
// this.appInsMap.set(index, ins)
return ins.$el return ins.$el
}, },
changeIndex(init = false, index = null) { changeIndex(init = false, index = null) {
@ -185,8 +186,8 @@ export default {
if (this.currentSlideItemIndex > 2) { if (this.currentSlideItemIndex > 2) {
let item = this.list[this.currentSlideItemIndex + 2] let item = this.list[this.currentSlideItemIndex + 2]
this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0]) this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
// this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount() this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
$("#base-slide-list .base-slide-item:first").remove() // $("#base-slide-list .base-slide-item:first").remove()
$(".base-slide-item").each(function () { $(".base-slide-item").each(function () {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight) $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
}) })
@ -195,8 +196,8 @@ export default {
if (this.currentSlideItemIndex > 1) { if (this.currentSlideItemIndex > 1) {
let item = this.list[this.currentSlideItemIndex - 2] let item = this.list[this.currentSlideItemIndex - 2]
this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0]) this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
// this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount() this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
$("#base-slide-list .base-slide-item:last").remove() // $("#base-slide-list .base-slide-item:last").remove()
$(".base-slide-item").each(function () { $(".base-slide-item").each(function () {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight) $(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
}) })