Przeglądaj źródła

下拉提示组件更新,尽量防止触发浏览器的下拉刷新机制

任一存 3 lat temu
rodzic
commit
7cd0b18d5d

BIN
src/assets/image/slide-tip-hand.png


+ 26 - 3
src/components/SlideTip.vue

@@ -9,6 +9,11 @@
       src="@/assets/image/下拉.png"
       alt=""
     >
+    <img
+      src="@/assets/image/slide-tip-hand.png"
+      class="slide-tip_hand"
+      alt=""
+    >
   </div>
 </template>
 
@@ -17,7 +22,7 @@ export default {
   props: {
     text: {
       type: String,
-      default: '文<br>脉'
+      default: ''
     }
   }
 }
@@ -29,7 +34,7 @@ export default {
   bottom: 6.17rem;
   left: 50%;
   transform: translateX(-50%);
-  animation: twinkle 2s infinite;
+  // animation: twinkle 2s infinite;
   font-size: 1.13rem;
   font-family: Source Han Sans CN;
   font-weight: 500;
@@ -38,7 +43,12 @@ export default {
     width: 0.94rem;
     height: 2.47rem;
     margin-top: 0.94rem;
-    transform: rotate(180deg);
+  }
+  .slide-tip_hand {
+    position: absolute;
+    left: 50%;
+    width: 2.26rem;
+    animation: move-up-down 2s infinite;
   }
 }
 @keyframes twinkle {
@@ -55,4 +65,17 @@ export default {
     opacity: 0;
   }
 }
+@keyframes move-up-down {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    top: 100%;
+    opacity: 0;
+  }
+}
 </style>

+ 16 - 0
src/views/End.vue

@@ -20,7 +20,23 @@ export default {
       showPlayBtn: false,
     }
   },
+  created() {
+    document.addEventListener('touchmove', this.avoidPulldownRefresh, {
+      passive: false,
+    })
+  },
+  mounted() {
+  },
+  destroyed() {
+    clearInterval(this.intervalId)
+    document.removeEventListener('touchmove', this.avoidPulldownRefresh, {
+      passive: false,
+    })
+  },
   methods: {
+    avoidPulldownRefresh(event) {
+      event.preventDefault()
+    },
     onPlay() {
       this.beganPlay = true
     },

+ 4 - 1
src/views/Home.vue

@@ -35,7 +35,10 @@
       @load="onImgLoad(index - 1)"
       @error="onImgError(index - 1)"
     >
-    <SlideTip v-if="currentFrameIdx >= 20" />
+    <SlideTip
+      v-if="currentFrameIdx >= 20"
+      text="文<br>脉"
+    />
     <div class="bottom-wrapper">
       <img
         class="jiangsu"

+ 11 - 11
src/views/TreeAnimation.vue

@@ -20,7 +20,6 @@
     <SlideTip
       v-show="showSlideTip"
       class="slide-tip"
-      text="了<br>解<br>详<br>情"
     />
     <van-loading
       v-show="!showTree"
@@ -44,14 +43,6 @@
 
 <script>
 
-function avoidPulldownRefresh(event, vueContext) {
-  if (vueContext.$refs['img-wrapper'].scrollTop === 0) {
-    event.preventDefault()
-  } else {
-    return
-  }
-}
-
 export default {
   data() {
     return {
@@ -63,18 +54,27 @@ export default {
 
   },
   created() {
-    document.addEventListener('touchmove', avoidPulldownRefresh, {
+    document.addEventListener('touchmove', this.avoidPulldownRefresh, {
       passive: false,
     })
   },
   mounted() {
   },
   destroyed() {
-    document.removeEventListener('touchmove', avoidPulldownRefresh, {
+    document.removeEventListener('touchmove', this.avoidPulldownRefresh, {
       passive: false,
     })
   },
   methods: {
+    avoidPulldownRefresh(event) {
+      if (this.$refs['img-wrapper'].scrollTop === 0) {
+        event.preventDefault()
+        console.log('sadfsdf')
+      } else {
+        console.log('ljkl;jj;lji')
+        return
+      }
+    },
     onTreeImgLoad() {
       this.showTree = true
       this.$nextTick(() => {

+ 12 - 0
src/views/TreeSelection.vue

@@ -187,6 +187,11 @@ export default {
       currentTab: 'selectedTreeTabIdx',
     }),
   },
+  created() {
+    document.addEventListener('touchmove', this.avoidPulldownRefresh, {
+      passive: false,
+    })
+  },
   mounted() {
     utils.registerSlideToRoute('hammer-target', 'Chart', this)
     this.intervalId = setInterval(() => {
@@ -244,11 +249,18 @@ export default {
         break
       }
     }, 41)
+
   },
   destroyed() {
     clearInterval(this.intervalId)
+    document.removeEventListener('touchmove', this.avoidPulldownRefresh, {
+      passive: false,
+    })
   },
   methods: {
+    avoidPulldownRefresh(event) {
+      event.preventDefault()
+    },
     onClickExhibTabBtn(idx) {
       this.$store.commit("setSelectedTreeTabIdx", idx)
     },