优化首页视频播放逻辑

我页面的一些子页面

src/App.vue

@@ -1,10 +1,36 @@
 <template>
-  <router-view></router-view>
+  <router-view v-slot="{ Component }">
+    <transition :name="transitionName">
+      <component :is="Component"/>
+    </transition>
+  </router-view>
 </template>
 
 <script>
 export default {
   name: 'App',
+  data() {
+    return {
+      transitionName: 'go'
+    }
+  },
+  // watch $route 决定使用哪种过渡
+  watch: {
+    '$route'(to, from) {
+      let noAnimation = ['/', '/home', '/me', '/attention', '/message']
+      if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
+        return this.transitionName = ''
+      }
+      const routeDeep = ['/message', '/attention', '/home', '/me',
+        '/editUserInfo',
+        '/editUserInfoItem',
+        '/VideoDetail',
+      ];
+      const toDepth = routeDeep.indexOf(to.path)
+      const fromDepth = routeDeep.indexOf(from.path)
+      this.transitionName = toDepth > fromDepth ? 'go' : 'back'
+    }
+  },
 }
 </script>
 <style lang="scss">
@@ -18,51 +44,35 @@ export default {
 #app {
   height: 100%;
   width: 100%;
+  position: relative;
 }
 
-
-.go-enter {
-  left: 100%;
+.go-enter-from {
+  transform: translate3d(100%, 0, 0);
 }
 
-.go-enter-to {
-  left: 0;
-}
-
-.go-leave {
-  left: 0;
+//最终状态
+.back-enter-to, .back-enter-from, .go-enter-to, .go-leave-from {
+  transform: translate3d(0, 0, 0);
 }
 
 .go-leave-to {
-  left: -100%;
+  transform: translate3d(-100%, 0, 0);
 }
 
-.go-enter-active, .go-leave-active {
+.go-enter-active, .go-leave-active, .back-enter-active, .back-leave-active {
   transition: all .3s;
 }
 
 
-.back-enter {
-  left: -100%;
-}
-
-.back-enter-to {
-  left: 0;
-}
-
-.back-leave {
-  left: 0;
+.back-enter-from {
+  transform: translate3d(-100%, 0, 0);
 }
 
 .back-leave-to {
-  left: 100%;
+  transform: translate3d(100%, 0, 0);
 }
 
-.back-enter-active, .back-leave-active {
-  transition: all .3s;
-}
-
-
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.3s ease;

src/components/Video.vue

@@ -135,7 +135,7 @@ export default {
     isMy: {
       type: Boolean,
       default: () => {
-        return true
+        return false
       }
     }
   },

src/pages/home/Index2.vue

@@ -495,6 +495,11 @@ export default {
       }
     }
   },
+  created() {
+    if (process.env.NODE_ENV !== 'development') {
+      this.videos = this.$clone(this.videos1)
+    }
+  },
   mounted() {
     this.height = document.body.clientHeight
     this.width = document.body.clientWidth

src/pages/me/EditUserInfo.vue

@@ -45,13 +45,19 @@
         </div>
       </div>
       <div class="row">
+        <input type="date" style="opacity: 0;left: 0;
+    position: absolute;
+    right: 0;
+    width: 98%;
+    height: 50px;"/>
+
         <div class="left">生日</div>
         <div class="right">
           <span>B</span>
           <img src="../../assets/img/icon/back.png" alt="">
         </div>
       </div>
-      <div class="row">
+      <div class="row" @click="$nav('/editUserInfoItem')">
         <div class="left">所在地</div>
         <div class="right">
           <span>B</span>
@@ -104,6 +110,13 @@ export default {
 <style scoped lang="scss">
 @import "../../assets/scss/index";
 
+.edit{
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}
 .title {
   display: flex;
   flex-direction: column;

src/pages/me/EditUserInfoItem.vue

@@ -64,6 +64,11 @@ export default {
 @import "../../assets/scss/index";
 
 .edit-item {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
 
   .save-yes {
     color: $primary-btn-color;

src/pages/me/Me.vue

@@ -321,7 +321,6 @@ export default {
   height: 100%;
   width: 100%;
 
-
   .no-more {
     font-size: 1.4rem;
     padding: 10px;

src/pages/me/School.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "School"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/me/VideoDetail.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="home-index">
+  <div id="video-detail">
     <SlideList key1="父" style="width: 100vw;" v-model:can-move="canMove">
       <SlideItem>
         <div class="search-ctn">
-          <img src="../../assets/img/icon/back.png" alt="" class="back">
+          <img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
           <Search></Search>
         </div>
         <SlideList key1="子" direction="column" v-model:active-index="videoActiveIndex">
@@ -221,6 +221,118 @@ export default {
           duration: 99
         },
       ],
+      videos1: [
+        {
+          // 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
+        },
+      ],
       addCount: 0,
       total: 10,
       baseActiveIndex: 0,
@@ -243,9 +355,10 @@ export default {
     // this.width = document.body.clientWidth
   },
   created() {
-
+    if (process.env.NODE_ENV !== 'development') {
+      this.videos = this.$clone(this.videos1)
+    }
   },
-
 }
 </script>
 
@@ -262,7 +375,12 @@ export default {
   transform: translate3d(0, 50vh, 0);
 }
 
-#home-index {
+#video-detail {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   height: 100%;
   width: 100%;
 

src/utils/global-methods.js

@@ -1,4 +1,7 @@
 export default {
+  $back(){
+    window.history.back()
+  },
   $stopPropagation(e) {
     e.stopImmediatePropagation()
     e.stopPropagation()