feat: better-scroll封装组件

package.json

@@ -13,6 +13,7 @@
     "@antv/g6": "^4.3.6",
     "@babel/polyfill": "^7.12.1",
     "@better-scroll/core": "^2.5.1",
+    "@better-scroll/pull-down": "^2.5.1",
     "@better-scroll/pull-up": "^2.5.1",
     "@better-scroll/scroll-bar": "^2.5.1",
     "animate.css": "^4.1.1",

src/components/hzwlComponents/phone/PhoneScroll.vue

@@ -1,17 +1,50 @@
 <template>
   <div class="scroll-wrapper" ref="scroll" :style="{height: height}">
     <div class="scroll-content" ref="content">
-      <slot></slot>
+      <!-- 下拉刷新 -->
+      <template v-if="pullDownRefresh">
+        <div v-if="pullDown" class="pullDownText">
+          <span v-if="isEnterThreshold">下拉刷新</span>
+          <span v-if="isLeaveThreshold">松开刷新</span>
+          <van-loading
+              v-if="pullDownLoading"
+              type="spinner"
+              size="16px"
+              text-size="12px"
+              color="#3170A8"
+              style="text-align: center"
+          >加载中...</van-loading>
+        </div>
+      </template>
+
+      <!-- 除上拉和下拉之外的loading -->
       <van-loading
-          v-if="loading"
+          v-if="loading && !pullDownLoading && !pullUpLoading"
+          class="pageLoading"
           type="spinner"
           size="16px"
           text-size="12px"
           color="#3170A8"
           style="text-align: center"
       >加载中...</van-loading>
-      <div v-if="data.length > 0 && data.length >= total" style="font-size: 12px;text-align: center;color: #999">已加载全部数据</div>
-      <van-empty v-if="!loading && data.length === 0" description="暂无数据" />
+
+      <slot></slot>
+
+      <!-- 上拉加载 -->
+      <template v-if="pullUpLoad">
+        <van-loading
+            v-if="pullUpLoading"
+            type="spinner"
+            size="16px"
+            text-size="12px"
+            color="#3170A8"
+            style="text-align: center"
+        >加载中...</van-loading>
+        <template v-else>
+          <div v-if="isShowAll" style="font-size: 12px;text-align: center;color: #999">已加载全部数据</div>
+          <van-empty v-if="isEmpty" description="暂无数据" />
+        </template>
+      </template>
     </div>
   </div>
 </template>
@@ -20,9 +53,11 @@
 import BScroll from '@better-scroll/core'
 import ScrollBar from '@better-scroll/scroll-bar'
 import Pullup from '@better-scroll/pull-up'
+import PullDown from '@better-scroll/pull-down'
 
 BScroll.use(ScrollBar)
 BScroll.use(Pullup)
+BScroll.use(PullDown)
 
 export default {
   name: "PhoneScroll",
@@ -37,10 +72,12 @@ export default {
       default: () => [],
       required: true
     },
-    // 是否加载中
-    loading: {
-      type: Boolean,
-      default: false,
+    page: {
+      type: Number,
+      required: true
+    },
+    pageSize: {
+      type: Number,
       required: true
     },
     // 总数
@@ -48,18 +85,46 @@ export default {
       type: Number,
       required: true
     },
-    // 上拉加载回调
-    pullingUpHandler: {
+    // 除上拉和下拉之外的loading
+    loading: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否开启上拉加载
+    pullUpLoad: {
+      type: Boolean,
+      default: false
+    },
+    // 是否开启下拉刷新
+    pullDownRefresh: {
+      type: Boolean,
+      default: false
+    },
+
+    // 获取数据回调 返回值必须是Promise
+    getDataHandler: {
       type: Function,
-      default: () => {
-        console.log('请传入上拉加载回调函数参数pullingUpHandler')
+      default: (page) => {
+        console.log('请传入获取数据回调函数参数getDataHandler', page)
+        return Promise.resolve()
       }
     },
   },
   data () {
     return {
       bs: null,
-      toEnd: false
+
+      // 下拉刷新
+      pullDown: false,
+      isEnterThreshold: false,
+      isLeaveThreshold: false,
+      pullDownLoading: false,
+
+      // 上拉加载
+      pullUpLoading: false,
+      isShowAll: false,
+      isEmpty: false,
     }
   },
   watch: {
@@ -71,19 +136,36 @@ export default {
     refreshScroll () {
       this.$nextTick(() => {
         if (!this.bs) {
+          const pullUpLoad = this.pullUpLoad ? {
+            threshold: 200
+          } : false
+          const pullDownRefresh = this.pullDownRefresh ? {
+              threshold: 50,
+              stop: 40
+            } : false
           this.bs = new BScroll(this.$refs.scroll, {
             probeType: 3,
             scrollbar: true,
-            pullUpLoad: {
-              threshold: 50
-            },
+            pullUpLoad,
+            pullDownRefresh,
             click: true
           })
-          this.bs && this.bs.on('pullingUp', () => {
-            this.pullingUpHandler()
-            // 结束上拉加载
-            this.bs.finishPullUp()
-          })
+
+          if (this.pullUpLoad) {
+            this.bs.on('pullingUp', this.pullingUpHandler)
+          }
+
+          if (this.pullDownRefresh) {
+            this.bs.on('pullingDown', this.pullingDownHandler)
+
+            this.bs.on('enterThreshold', () => {
+              this.showPullDownText('isEnterThreshold')
+            })
+
+            this.bs.on('leaveThreshold', () => {
+              this.showPullDownText('isLeaveThreshold')
+            })
+          }
 
           this.bs.on('scroll', ({x, y}) => { })
 
@@ -92,6 +174,56 @@ export default {
         }
       })
     },
+
+    // 上拉加载回调
+    async pullingUpHandler () {
+      if (this.page * this.pageSize <= this.total) {
+        this.pullUpLoading = true
+        // 从下一页获取数据
+        await this.getDataHandler(this.page + 1)
+        this.pullUpLoading = false
+      }
+      this.showPullUpText()
+      // 结束上拉加载
+      this.bs.finishPullUp()
+    },
+
+    // 下拉刷新回调
+    async pullingDownHandler () {
+      this.showPullDownText('pullDownLoading')
+
+      // 从第一页获取数据
+      await this.getDataHandler(1)
+
+      this.hidePullDownText()
+      // 结束下拉刷新
+      this.bs.finishPullDown()
+    },
+
+    showPullUpText () {
+      this.isEmpty = false
+      this.isShowAll = false
+      if (this.data.length === 0) {
+        this.isEmpty = true
+      } else {
+        if (this.data.length >= this.total) {
+          this.isShowAll = true
+        }
+      }
+    },
+    showPullDownText (key) {
+      this.isEnterThreshold = false
+      this.isLeaveThreshold = false
+      this.pullDownLoading = false
+      this[key] = true
+      this.pullDown = true
+    },
+    hidePullDownText () {
+      this.isEnterThreshold = false
+      this.isLeaveThreshold = false
+      this.pullDownLoading = false
+      this.pullDown = false
+    },
     scrollTo (x, y ,time, easing) {
       if (this.bs) {
         this.bs.scrollTo(x, y, time, easing)
@@ -107,4 +239,24 @@ export default {
   overflow: hidden;
   position: relative;
 }
+
+.pageLoading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pullDownText {
+  position: absolute;
+  text-align: center;
+  pointer-events: auto;
+  height: 40px;
+  line-height: 40px;
+  top: -40px;
+  width: 100%;
+  left: 0;
+  font-size: 12px;
+  color: #3170A8;
+}
 </style>