优化首页视频播放逻辑

src/pages/home/Index2.vue

@@ -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,

src/pages/home/SlideListVirtual.vue

@@ -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>