提交

src/view/schedule/index.vue

@@ -8,23 +8,93 @@
       </div>
     </div>
 
-    <div class="page" @touchstart="touchstart" @touchend="touchend">
-      <pageFirst :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 0" />
+    <div ref="main" class="page" @touchstart="touchstart" @touchend="touchend">
+      <pageFirst
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 0"
+      />
       <!-- <pageThird :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 1" /> -->
-      <pageFifth @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 1" />
-      <page4 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 2" />
-      <page7 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 3" />
-      <page8 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 4" />
-      <page9 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 5" />
-      <page10 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 6" />
-      <page11 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 7" />
-      <page12 @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 8" />
-      <pageSexth @isNext="isNext" :class="{ animate__animated: true, animate__fadeInUp: isUp,animate__fadeInDown: !isUp}" v-if="page === 9" />
+      <pageFifth
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 1"
+      />
+      <page4
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 2"
+      />
+      <page7
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 3"
+      />
+      <page8
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 4"
+      />
+      <page9
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 5"
+      />
+      <page10
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 6"
+      />
+      <page11
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 7"
+      />
+      <page12
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 8"
+      />
+      <pageSexth
+        :class="{
+          animate__animated: true,
+          animate__fadeInUp: isUp,
+          animate__fadeInDown: !isUp,
+        }"
+        v-if="page === 9"
+      />
     </div>
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 import pageFirst from './page1.vue';
 // import pageThird from './page3.vue';
 import page4 from './page4.vue';
@@ -46,22 +116,41 @@ import page12 from './page12.vue';
  */
 // console.log(window.$originData);
 // const play_stats = ref(false);
+const main = ref(null);
 const page = ref(0);
 const isUp = ref(true);
 let startY = 0;
-let t= 0;
+const isChangePage = cha => {
+  let nodes = main.value.childNodes || [];
+  let sondiv = null;
+  for (let i = 0; i < nodes.length; i++) {
+    const ele = nodes[i];
+    if (ele.localName !== 'div') continue;
+    if (sondiv) break;
+    sondiv = ele;
+  }
+
+  // 视口高度 main.value.offsetHeight
+  // 内容高度 sondiv.offsetHeight
+
+  // 视口基本大于内容  则可以翻页
+  let h = main.value.offsetHeight + main.value.scrollTop;
+
+  if (cha < 10 && main.value.scrollTop < 10) return true;
+  if (h - sondiv.offsetHeight >= -10) return true;
+  return false;
+};
 const touchstart = e => {
   startY = e.changedTouches[0].clientY;
-  t = Date.now()
 };
 
 const touchend = e => {
   const cha = startY - e.changedTouches[0].clientY;
+  if (!isChangePage(cha)) return;
   //  cha > 0    向上滑动手指
   //  cha < 0    向下滑动手指
-  if(cha <= 0 && cha >= -50) return 
-  if(cha > 0 && cha < 100) return 
-  if (Date.now() - t > 500) return e.preventDefault(); 
+  if (cha <= 0 && cha >= -50) return;
+  if (cha > 0 && cha < 100) return;
   // 距离足够则滑动到下一页；
   let n = cha > 0 ? 1 : -1;
   let dn = n + page.value;
@@ -70,16 +159,25 @@ const touchend = e => {
   if (dn < 0) return (dn = len);
   if (dn > len) return (dn = 0);
   page.value = dn;
+  nextTick(() => {
+    let nodes = main.value.childNodes || [];
+    let sondiv = null;
+    for (let i = 0; i < nodes.length; i++) {
+      const ele = nodes[i];
+      if (ele.localName !== 'div') continue;
+      if (sondiv) break;
+      sondiv = ele;
+    }
+    let t = setTimeout(() => {
+      sondiv.scrollTop = 0;
+      clearTimeout(t);
+    }, 100);
+  });
 };
 
-const isNext = B => {
-    console.log(B)
-}
-
-const touchmove = ()=> {
-    // e.preventDefault();
-}
-
+const touchmove = () => {
+  // e.preventDefault();
+};
 </script>
 <style lang="scss">
 // 动画库
@@ -169,10 +267,10 @@ const touchmove = ()=> {
     width: 100%;
     height: 100vh;
     margin: 0 auto;
+    overflow-y: auto;
 
     & > div {
       width: 100%;
-      height: 100%;
     }
   }
 

src/view/schedule/skeleton.vue

@@ -72,7 +72,6 @@ defineProps({
   }
 
   .center {
-    height: 90vh;
     text-align: center;
     line-height: 2em;
     font-size: 14px;
@@ -140,7 +139,6 @@ defineProps({
     .centent {
       width: 85%;
       margin: 0 auto;
-      min-height: calc(90vh - 2.5em);
       line-height: 1.5em;
       text-align: left;
       overflow-y: scroll;