feat: 手机端-下拉加载公共组件

package.json

@@ -5,18 +5,25 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "inspect": "vue-cli-service inspect > outputDev.js",
+    "inspectProd": "vue-cli-service inspect --mode=production > outputProd.js",
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
   "dependencies": {
     "@antv/g6": "^4.3.6",
     "@babel/polyfill": "^7.12.1",
+    "@better-scroll/core": "^2.5.1",
+    "@better-scroll/pull-up": "^2.5.1",
+    "@better-scroll/scroll-bar": "^2.5.1",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.6.5",
+    "cross-env": "^5.0.5",
     "echarts": "^5.0.1",
     "element-ui": "^2.13.2",
     "es6-promise": "^4.2.8",
+    "increase-memory-limit": "^1.0.3",
     "jquery": "^3.5.1",
     "js-base64": "^2.6.2",
     "moment": "^2.29.1",
@@ -31,9 +38,7 @@
     "vue-custom-scrollbar": "^1.4.4",
     "vue-i18n": "^8.22.4",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0",
+    "vuex": "^3.4.0"
-    "increase-memory-limit": "^1.0.3",
-    "cross-env": "^5.0.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/components/hzwlComponents/phone/PhoneScroll.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="scroll-wrapper" ref="scroll" :style="{height: height}">
+    <div class="scroll-content" ref="content">
+      <slot></slot>
+      <van-loading
+          v-if="loading"
+          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="暂无数据" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BScroll from '@better-scroll/core'
+import ScrollBar from '@better-scroll/scroll-bar'
+import Pullup from '@better-scroll/pull-up'
+
+BScroll.use(ScrollBar)
+BScroll.use(Pullup)
+
+export default {
+  name: "PhoneScroll",
+  props: {
+    // 容器wrapper高度
+    height: {
+      type: String,
+      default: '100%'
+    },
+    data: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    // 总数
+    total: {
+      type: Number,
+      required: true
+    },
+    // 上拉加载回调
+    pullingUpHandler: {
+      type: Function,
+      default: () => {
+        console.log('请传入上拉加载回调函数参数pullingUpHandler')
+      }
+    },
+  },
+  data () {
+    return {
+      bs: null,
+      toEnd: false
+    }
+  },
+  watch: {
+    data() {
+      this.refreshScroll()
+    }
+  },
+  methods: {
+    refreshScroll () {
+      this.$nextTick(() => {
+        if (!this.bs) {
+          this.bs = new BScroll(this.$refs.scroll, {
+            probeType: 3,
+            scrollbar: true,
+            pullUpLoad: {
+              threshold: 50
+            },
+            click: true
+          })
+          this.bs && this.bs.on('pullingUp', () => {
+            this.pullingUpHandler()
+            // 结束上拉加载
+            this.bs.finishPullUp()
+          })
+
+        } else {
+          this.bs.refresh()
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.scroll-wrapper {
+  height: calc(100vh - 131px);
+  overflow: hidden;
+  position: relative;
+}
+</style>