优化

src/assets/less/custom.less

@@ -125,6 +125,8 @@ p {
   height: 100%;
   width: 100%;
   transition: height .3s;
+  position: relative;
+  overflow: hidden;
 
   .slide-list {
     height: 100%;

src/components/slide/BVideo.vue

@@ -13,7 +13,7 @@
     <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
     <div class="float" :style="{opacity: isUp?0:1}">
       <div :style="{opacity:isMove ? 0:1}" class="normal">
-        <template v-if="!commentVisible && !isMarginTop">
+        <template v-if="!commentVisible">
           <ItemToolbar v-model:item="localItem"
                        :position="position"
                        v-bind="$attrs"
@@ -165,7 +165,6 @@ export default {
       videoScreenHeight: 0,
       videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
       commentVisible: false,
-      isMarginTop: false,
       LUtils: Utils
     }
   },
@@ -245,15 +244,11 @@ export default {
     bus.off(EVENT_KEY.CLOSE_SUB_TYPE, this.onCloseSubType)
   },
   methods: {
-    onOpenSubType({id, height}) {
-      if (id !== this.item.id) return
-      this.isMarginTop = true
-      Utils.$setCss(this.$refs.video, 'margin-top', `${height}px`)
+    onOpenSubType() {
+      this.commentVisible = true
     },
-    onCloseSubType({id}) {
-      if (id !== this.item.id) return
-      this.isMarginTop = false
-      Utils.$setCss(this.$refs.video, 'margin-top', `0px`)
+    onCloseSubType() {
+      this.commentVisible = false
     },
     onDialogMove({tag, e}) {
       if (this.commentVisible && tag === 'comment') {

src/pages/slideHooks/index.vue

@@ -11,13 +11,12 @@
         />
 
         <div class="slide-content"
-             @touchstart="pageClick">
+        >
           <H class="first-horizontal-item"
              name="main"
              id="slideHook"
-             v-love="'slideHook'"
              v-model:index="state.navIndex">
-            <SlideItem>
+            <SlideItem id="slide1">
               <div class="sub-type"
                    :class="state.subTypeIsTop?'top':''"
                    ref="subTypeRef">
@@ -59,12 +58,15 @@
                 </div>
               </div>
               <div class="sub-type-notice"
-                   v-if="state.subType===-1 && state.navIndex === 0"
+                   v-if="state.subType===-1 && !state.subTypeVisible"
                    @click="showSubType">附近吃喝玩乐
               </div>
               <VInfinite
-                  :style="{background: 'black'}"
+                  @touchstart="pageClick"
+                  v-love="'slideHook'"
+                  :style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
                   name="main"
+                  id="slide1-infinite"
                   v-model:index="state.itemIndex"
                   :render="render"
                   :list="state.recommendVideos"
@@ -224,7 +226,7 @@ const bodyWidth = computed(() => store.state.bodyWidth)
 const subTypeRef = ref(null)
 const state = reactive({
   baseIndex: 0,
-  navIndex: 4,
+  navIndex: 0,
   itemIndex: 0,
   test: '',
   recommendVideos: [
@@ -263,6 +265,8 @@ const state = reactive({
   commentVisible: false,
   fullScreen: false,
   subType: -1,
+  subTypeVisible: false,
+  subTypeHeight: '0',
   //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
   subTypeIsTop: false,
   totalSize: 0,
@@ -301,24 +305,17 @@ function loadMore() {
 function showSubType(e) {
   Utils.$stopPropagation(e)
   console.log('subTypeRef',)
-  state.subType = 0
-  setTimeout(() => {
-    state.subTypeIsTop = true
-  }, 300)
-  let id = state.recommendVideos[state.itemIndex].id
-  bus.emit(EVENT_KEY.OPEN_SUB_TYPE, {
-    id,
-    height: subTypeRef.value.getBoundingClientRect().height
-  })
+  state.subTypeHeight = subTypeRef.value.getBoundingClientRect().height + 'px'
+  state.subTypeVisible = true
+  setTimeout(() => state.subTypeIsTop = true, 300)
+  bus.emit(EVENT_KEY.OPEN_SUB_TYPE,)
 }
 
 function pageClick(e) {
   // console.log('pageClick')
-  if (state.subType !== -1) {
-    state.subType = -1
-    state.subTypeIsTop = false
-    let id = state.recommendVideos[state.itemIndex].id
-    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE, {id})
+  if (state.subTypeVisible) {
+    state.subTypeIsTop = state.subTypeVisible = false
+    bus.emit(EVENT_KEY.CLOSE_SUB_TYPE,)
     Utils.$stopPropagation(e)
   }
 }
@@ -408,13 +405,41 @@ function render(item, itemIndex, play, position) {
 <style scoped lang="less">
 @import "@/assets/less/index";
 
-.sub-type {
+
+.test-slide-wrapper {
+  font-size: 14rem;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .big {
+    font-weight: bold;
+    font-size: 100rem;
+  }
+
+  .slide-content {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.first-horizontal-item {
+  //width: 90vw;
+  //height: 80vh;
+  width: 100vw;
+  height: calc(100vh - @footer-height);
+  overflow: hidden;
+
+  #slide1 {
+    position: relative;
+
+    .sub-type {
       width: 100%;
       position: fixed;
       top: 0;
 
       &.top {
-    z-index: 1;
+        z-index: 2;
       }
 
       .local {
@@ -456,9 +481,9 @@ function render(item, itemIndex, play, position) {
           }
         }
       }
-}
+    }
 
-.sub-type-notice {
+    .sub-type-notice {
       position: fixed;
       background: rgba(black, .4);
       top: 100rem;
@@ -469,47 +494,15 @@ function render(item, itemIndex, play, position) {
       z-index: 3;
       font-size: 12rem;
       color: white;
-}
-
-.test-slide-wrapper {
-  font-size: 14rem;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  .big {
-    font-weight: bold;
-    font-size: 100rem;
-  }
-
-  .slide-content {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.first-horizontal-item {
-  //width: 90vw;
-  //height: 80vh;
-  width: 100vw;
-  height: calc(100vh - @footer-height);
-  overflow: hidden;
-
-  .red {
-    background-color: red;
     }
 
-  .yellow {
-    background-color: yellow;
+    #slide1-infinite {
+      z-index: 1;
+      margin-top: 0;
+      transition: height, margin-top .3s;
     }
-
-  .blue {
-    background-color: blue;
   }
 
-  .gray {
-    background-color: gray;
-  }
 }
 
 </style>