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

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

@ -37,7 +37,7 @@ export default {
components: {SlideListVirtual, Video1, Comment, Share,},
data() {
return {
videos: [
videos1: [
{
// videoUrl: mp40,
videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
@ -149,6 +149,118 @@ export default {
duration: 99
},
],
videos: [
{
videoUrl: mp40,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/0.mp4',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp41,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/1.mp4',
videoPoster: src1Bg,
isLoved: true,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp42,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/2.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp43,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/3.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp44,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/4.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp45,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/5.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp46,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/6.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp47,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/7.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp48,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/8.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp49,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/9.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
{
videoUrl: mp410,
// videoUrl: 'http://qvutp218u.hn-bkt.clouddn.com/10.mp4',
videoPoster: src1Bg,
isLoved: false,
loves: 1234,
comments: 666,
shared: 999,
duration: 99
},
],
isCommenting: false,
isSharing: false,
videoActiveIndex: 0,

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

@ -235,7 +235,6 @@ export default {
getHeight(index) {
return this.slideItemsHeights.reduce((p, c, i) => {
if (i < index) {
//最后一页，如果宽度不够屏幕宽度，那不能拉完
if (this.slideItemsHeights.length - 1 === i + 1) {
p = p + c - (this.wrapperHeight - this.slideItemsHeights[index])
} else {
@ -272,7 +271,6 @@ export default {
height: 100%;
overflow: hidden;
#base-slide-list {
display: flex;
height: 100%;
@ -280,119 +278,5 @@ export default {
position: relative;
}
.indicator-home {
position: fixed;
font-size: 1.6rem;
top: 0;
left: 0;
height: 60px;
z-index: 2;
width: 100%;
color: white;
.notice {
opacity: 0;
top: 0;
position: absolute;
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loading {
opacity: 0;
top: 20px;
right: 15px;
position: absolute;
}
.toolbar {
position: relative;
color: white;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
.tab-ctn {
width: 30%;
position: relative;
.tabs {
display: flex;
justify-content: space-between;
font-weight: bold;
.tab {
transition: color .3s;
color: gray;
&.active {
color: white;
}
}
}
.indicator {
//transition: left .3s;
position: absolute;
bottom: -8px;
height: 3px;
width: 20px;
background: #fff;
border-radius: 5px;
}
}
}
}
.indicator-me {
top: 0;
left: 0;
right: 0;
z-index: 999;
background: $main-bg;
.tabs {
display: flex;
justify-content: space-between;
font-weight: bold;
.tab {
height: 40px;
width: 33%;
display: flex;
justify-content: center;
align-items: center;
color: gray;
transition: color .3s;
&.active {
color: white;
}
}
}
.indicator {
height: 2px;
background: gold;
width: 33%;
position: relative;
transition: all .3s;
}
}
.indicator-me.fixed {
position: fixed;
}
}
</style>