faets

src/pages/bk1/index.vue

@@ -2,15 +2,15 @@
   <div class="bk-pg">
     <GoBack class="goback abs" @click="router.go(-1)" />
     <div id="bk1">
-      <Pg1 />
-      <Pg2 />
-      <Pg3 />
+      <Pg1 :active="pgRef == 1" />
+      <Pg2 :active="pgRef == 2" />
+      <Pg3 :active="pgRef == 3" />
     </div>
   </div>
 </template>
 
 <script setup>
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import GoBack from '@/components/GoBack.vue';
   import Pg1 from './pg1.vue';
@@ -21,13 +21,20 @@
   const { query } = useRoute();
   const { page = 1 } = query || {};
 
+  const pgRef = ref(page);
+
   onMounted(() => {
     $("#bk1").turn({
       width: '100vw',
       height: '100vh',
       display: 'single',
       page,
-      pages: 3
+      pages: 3,
+      when: {
+        turned: function(e, pg) {
+          pgRef.value = pg;
+        }
+      }
     });
   });
 </script>

src/pages/bk1/pg2.vue

@@ -3,12 +3,12 @@
     <div class="content">
       <div class="header-img">
         <img src="/images/bk1/pg2/header.png" alt="">
-        <div id="flower" class="flower" />
+        <div ref="flowerRef" class="flower" />
       </div>
       <br>
       <img class="badge-img" src="/images/bk1/pg2/badge.png" alt="">
 
-      <p class="txt animate__animated animate__rubberBand">
+      <p class="txt animate__animated animate__fadeIn">
         2014年，<br>
         南京广电集团以“紫金草”为原型，<br>
         制作紫金草徽章发放给市民。<br>
@@ -24,35 +24,35 @@
 </template>
 
 <script setup>
-  import { onMounted } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import Dot from './Dot.vue';
   import FlipIcon from './FlipIcon.vue';
   import useSerial from './useSerial';
 
-  const flowerImg = {
-    maxHeight: 11200,
-    height: 700,
-    renderHeight: 150,
-    percent: 150 / 700,
-  }
+  const props = defineProps({
+    active: Boolean,
+  });
+
+  const flowerRef = ref();
+  const ready = computed(() => props.active);
 
-  onMounted(() => {
+  console.log('-----<>', ready);
+  
+  useSerial((t) => {
     const maxHeight = 11200;
     const rawHeight = 700;
-    const flower = document.querySelector('#flower');
+    const flower = flowerRef.value;
     const height = flower.offsetHeight;
+    const pos = t * rawHeight;
 
-    useSerial((t) => {
-      const pos = t * flowerImg.height;
+    const backgroundPosition = `0 -${pos * height / rawHeight}px`;
+    flower.style.backgroundPosition = backgroundPosition;
 
-      const backgroundPosition = `0 -${pos * height / rawHeight}px`;
-      flower.style.backgroundPosition = backgroundPosition;
+    if (pos >= (maxHeight - rawHeight)) {
+      return true;
+    }
+  }, ready);
 
-      if (pos >= (maxHeight - rawHeight)) {
-        return true;
-      }
-    })
-  });
 </script>
 
 <style lang="less" scoped>

src/pages/bk1/useSerial.js

@@ -1,13 +1,29 @@
+import { onMounted, ref, watch } from 'vue';
 
-export default function useSerial(callback) {
+export default function useSerial(callback, dep) {
   let times = 0;
+  let execed = false;
+  const loaded = ref(false);
 
-  const i = setInterval(() => {
-    const isOver = callback(times);
-    times += 1;
+  onMounted(() => {
+    loaded.value = true;
+  });
 
-    if (isOver) {
-      clearInterval(i);
+  watch([loaded, dep], (values) => {
+    console.log(values)
+    if (execed) return;
+
+    if (values[0] && values[1]) {
+      execed = true;
+      
+      const i = setInterval(() => {
+        const isOver = callback(times);
+        times += 1;
+
+        if (isOver) {
+          clearInterval(i);
+        }
+      }, 2000 / 16);
     }
-  }, 2000 / 16);
+  });
 }