H5：我的订单列表改为better-scroll，下拉刷新

htmldev/dashboard/src/views/order/list/index.vue

@@ -2,6 +2,22 @@
   <div ref="afBS"
        class="better-scroll">
     <ul>
+      <li
+        :class="{'static': isRefresh}"
+        class="pulldown-wrapper">
+        <van-loading
+          v-show="isRefresh"
+          size="24px"
+          type="spinner">加载中...
+        </van-loading>
+        <div
+          v-show="!isRefresh"
+          class="van-loading">
+          <span
+            class="van-loading__text"
+            style="margin-left: 0;">下拉刷新</span>
+        </div>
+      </li>
       <li
         v-for="(item, index) in list"
         :key="index"
@@ -46,10 +62,13 @@
 </template>
 <script>
 import BScroll from 'better-scroll'
-import { Dialog, Toast } from 'vant'
+import { Dialog, Toast, Loading } from 'vant'
 import { apiOrderList, apiOrderCancel } from './api/api'
 
 export default {
+  components: {
+    'van-loading': Loading
+  },
   data () {
     return {
       finished: false, // 所有数据是否加载完
@@ -166,9 +185,10 @@ export default {
                   this.getList()
                 })
               } else {
-                this.scroll.refresh()
                 this.scroll.finishPullDown()
                 this.scroll.finishPullUp()
+                this.scroll.refresh()
+                console.log(111)
               }
             })
           }
@@ -202,6 +222,7 @@ export default {
   width: 100%;
 
   ul {
+    padding-top: 10px;
     padding-bottom: 50px;
   }
 }
@@ -212,7 +233,7 @@ export default {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
   border-radius: 4px;
   border: 1px solid #f2f2f2;
-  margin: 10px 10px 0;
+  margin: 0 10px 10px;
 
   .title {
     display: flex;
@@ -307,4 +328,19 @@ export default {
 .color-orange {
   color: #e55e10 !important;
 }
+
+.pulldown-wrapper {
+  position: absolute;
+  left: 0;
+  top: -43px;
+  width: 100%;
+  text-align: center;
+
+  &.static {
+    position: static;
+    left: 0;
+    top: 0;
+    margin-bottom: 10px;
+  }
+}
 </style>