下拉刷新

admin/index.html

@@ -137,7 +137,7 @@
 <noscript>
   <strong>您的浏览器禁用了JavaScript脚本，系统无法正常为您提供服务</strong>
 </noscript>
-<div id="app">
+<div id="app scroll">
   <div class="start-loading-center">
     <svg width="100" height="100">
       <circle class="start-loading-mouth" cx="50" cy="50" r="14"></circle>
@@ -145,5 +145,39 @@
     </svg>
   </div>
 </div>
+<script type="text/javascript">
+  //禁止下拉
+  var overscroll = function (el) {
+    el.addEventListener('touchstart', function () {
+      var top = el.scrollTop
+        , totalScroll = el.scrollHeight
+        , currentScroll = top + el.offsetHeight
+      //If we're at the top or the bottom of the containers
+      //scroll, push up or down one pixel.
+      //
+      //this prevents the scroll from "passing through" to
+      //the body.
+      if (top === 0) {
+        el.scrollTop = 1
+      } else if (currentScroll === totalScroll) {
+        el.scrollTop = top - 1
+      }
+    })
+    el.addEventListener('touchmove', function (evt) {
+      //if the content is actually scrollable, i.e. the content is long enough
+      //that scrolling can occur
+      if (el.offsetHeight < el.scrollHeight)
+        evt._isScroller = true
+    })
+  }
+  overscroll(document.querySelector('.scroll'));
+  document.body.addEventListener('touchmove', function (evt) {
+    //In this case, the default behavior is scrolling the body, which
+    //would result in an overflow.  Since we don't want that, we preventDefault.
+    if (!evt._isScroller) {
+      evt.preventDefault()
+    }
+  })
+</script>
 </body>
 </html>

admin/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="app scroll" :style="appStyle"
+  <div id="app" class="app" :style="appStyle"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
@@ -233,34 +233,6 @@
         moveState: 0,
       }
     },
-    created() {
-      {
-        var overscroll = function (el) {
-          el.addEventListener('touchstart', function () {
-            console.log('touchstart');
-            var top = el.scrollTop, totalScroll = el.scrollHeight, currentScroll = top + el.offsetHeight;
-            if (top === 0) {
-              el.scrollTop = 1;
-            } else if (currentScroll === totalScroll) {
-              el.scrollTop = top - 1;
-            }
-          });
-          el.addEventListener('touchmove', function (evt) {
-            console.log('touchmove');
-            if (el.offsetHeight < el.scrollHeight) {
-              evt._isScroller = true;
-            }
-          });
-        }
-        overscroll(document.querySelector('.scroll'));
-        document.body.addEventListener('touchmove', function (evt) {
-          console.log('touchmove');
-          if (!evt._isScroller) {
-            evt.preventDefault();
-          }
-        });
-      }
-    },
     mounted() {
       //初始化
       this.init();