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

2023-11-27 11:26:20 +08:00
parent 5299f3647b
commit 88706b6127
2 changed files with 111 additions and 3 deletions
@@ -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>