列表组件

components/My_listbox.vue

@@ -0,0 +1,60 @@
+<template>
+    <view class="container">
+        <view id="mylisttop" />
+        <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
+            :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
+            @scrolltolower='loadThePage'>
+            <slot />
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'My_listbox',
+    components: {
+    },
+    props: ["getlist", "pullDown"],
+    data() {
+        return {
+            inRefresh: false, //下拉开启自定义项
+            height: 0
+        };
+    },
+    methods: {
+        /* 下拉刷新 */
+        pullToRefresh() {
+            this.inRefresh = true
+            this.$emit("getlist", true)
+        },
+        /* 刷新完成 */
+        RefreshToComplete() {
+            setTimeout(() => {
+                this.inRefresh = false
+            }, 500)
+        },
+        /* 加载分页 */
+        loadThePage() {
+            this.$emit("getlist", false)
+        },
+        /* 设置组件高度 */
+        setHeight() {
+            this.getHeight("#mylisttop", this).then(height => {
+                if (this.height != height) this.height = height
+            });
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-view {
+    position: relative;
+}
+
+/* 适配苹果手机底部安全距离 */
+.safety {
+    height: constant(safe-area-inset-bottom);
+    height: env(safe-area-inset-bottom);
+}
+</style>