feats

src/App.vue

@@ -4,6 +4,7 @@ import Loader from '@/components/Loader.vue';
 import ScrollDown from '@/components/ScrollDown.vue';
 import Image from '@/components/Image.vue';
 import { preload } from '@/utils/preload';
+import scroll from '@/utils/scroll'
 
 const fixedLogo = './fixed-logo.png';
 
@@ -11,6 +12,7 @@ const loading = ref(true);
 const percent = ref(0);
 const resources = ref([]);
 const fixedLogoHidden = ref(false);
+const unScroll = ref()
 
 const updateCallback = (num) => {
   percent.value = Math.round(num * 100);
@@ -22,13 +24,14 @@ const onClick = () => {
 }
 
 onMounted(() => {
-  window.document.body.addEventListener('touchmove', () => {
+  const { onStart, onEnd } = scroll(window.document);
+
+  onStart(() => {
     fixedLogoHidden.value = true;
   })
-  window.document.body.addEventListener('touchend', () => {
-    setTimeout(() => {
+
+  onEnd(() => {
       fixedLogoHidden.value = false;
-    }, 600);
   })
 
   preload(updateCallback).then((res) => {

src/components/Image.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="img-wrapper">
-    <Fog v-if="showFog" />
     <img :src="resource.img.src" @load="onLoad" alt="">
     <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
       <AudioPlayingVue :style="iconStyle" />
@@ -12,7 +11,6 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useModel } from '@zjxpcyc/vue-tiny-store';
-import Fog from './Fog.vue';
 import AudioPlayingVue from './AudioPlaying.vue';
 
 const [current, updateCurrent] = useModel('audio');
@@ -81,7 +79,7 @@ const onLoad = (e) => {
 
 <style lang="less" scoped>
 .img-wrapper {
-  margin-top: -0.1px; // 解决 iphone13 白边问题
+  margin-top: -0.5px; // 解决 iphone13 白边问题
   position: relative;
 
   .paybtn {

src/utils/scroll.js

@@ -0,0 +1,49 @@
+
+export default function scroll(dom) {
+  let scrolling = false;
+  let t1 = undefined;
+  const timeDiff = 500;
+
+  const scrollStart = { value: undefined };
+  const scrollEnd = { value: undefined };
+  
+  const onScroll = (e) => {
+    console.log('scrolling', scrolling, e);
+
+    if (!scrolling) {
+      if (typeof scrollStart.value === 'function') {
+        scrollStart.value(e);
+      }
+    }
+
+    scrolling = true;
+
+    if (t1) {
+      // 如果存在计时器 t1, 说明在滚动
+      // 立即销毁 t1
+      clearTimeout(t1);
+      t1 = undefined;
+    }
+
+    // t1 主要的作用是触发 stop 事件
+    t1 = setTimeout(() => {
+      // 如果 t1 被触发, 没有被销毁 说明没有在滚动
+      clearTimeout(t1);
+      t1 = undefined;
+      scrolling = false;
+
+      if (typeof scrollEnd.value === 'function') {
+        scrollEnd.value(e);
+      }
+    }, timeDiff);
+  }
+
+  console.log('scroll', dom);
+  dom.addEventListener('scroll', onScroll);
+
+  return {
+    onStart: cb => scrollStart.value = cb,
+    onEnd: cb => scrollEnd.value = cb,
+    destroy: () => dom.removeEventListener('scroll', onScroll)
+  }
+}