列表

components/My_listbox.vue

@@ -0,0 +1,114 @@
+<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'
+            :scroll-into-view="scrollIntoView" :lower-threshold='300' :scroll-with-animation="true"
+            @scrolltolower='loadThePage'>
+            <view id="header">
+                <slot />
+            </view>
+            <view v-if="empty">
+                <view :style="{ height: tovw(occupyHeight) }" />
+                <u-empty :mode="mode" text="暂无数据" />
+            </view>
+            <view id="bottom" />
+            <view v-if="pagingText" class="paging">
+                {{ pagingText }}
+            </view>
+        </scroll-view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'My_listbox',
+    props: {
+        getlist: Function,
+        automatic: {
+            type: Boolean,
+            default: true
+        },
+        mode: {
+            type: String,
+            default: "data"
+        },
+        pullDown: {
+            type: Boolean,
+            default: true
+        },
+        occupyHeight: {
+            type: Number,
+            default: 50
+        }
+    },
+    data() {
+        return {
+            inRefresh: false, //下拉开启自定义项
+            height: 0,
+            scrollIntoView: "",
+            pagingText: "",
+            empty: false
+        };
+    },
+    mounted() {
+        if (this.automatic) this.setHeight()
+    },
+    methods: {
+        /* 下拉刷新 */
+        pullToRefresh() {
+            this.inRefresh = true
+            this.$emit("getlist", true)
+        },
+        /* 刷新完成 */
+        RefreshToComplete() {
+            setTimeout(() => {
+                this.inRefresh = false
+            }, 500)
+        },
+        /* 加载分页 */
+        loadThePage() {
+            this.$emit("getlist", false)
+        },
+        /* 设置组件高度 */
+        setHeight(mode, num) {
+            return new Promise((resolve) => {
+                this.getHeight("#mylisttop", this).then(res => {
+                    let height = res;
+                    switch (mode) {
+                        case 'add':
+                            height = (res - 0) + (num - 0);
+                            break;
+                        case 'minus':
+                            height = res - num;
+                            break;
+                    }
+                    if (this.height != height) this.height = height;
+                    resolve(height)
+                });
+            })
+        },
+        /* 分页 */
+        paging(content, res) {
+            content.pageNumber = res.pageNumber;
+            content.pageTotal = res.pageTotal;
+            this.pagingText = content.pageNumber + ' / ' + content.pageTotal;
+            this.empty = res.total == 0;
+            return content;
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-view {
+    position: relative;
+
+    .paging {
+        width: 100vw;
+        text-align: center;
+        position: absolute;
+        bottom: 15px;
+    }
+}
+</style>

components/appList.vue

@@ -0,0 +1,47 @@
+<template>
+    <view class="box">
+        <navigator class="nav-box" v-for="item in appList" :key="item.name" :url="item.path" hover-class="navigator-hover">
+            <image v-if="item.cover" class="image" :src="item.cover" mode="aspectFit" lazy-load="false" />
+            <text v-else>{{ item.remark }}</text>
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: String
+        }
+    }, data() {
+        return {
+            appList: []
+        }
+    }, mounted() {
+        this.appList = this.getApps(this.model)
+        console.log(this.model, this.appList)
+    }
+}
+</script>
+
+<style lang="scss">
+.box {
+    padding: 0 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .nav-box {
+        width: 172.5px;
+        height: 104px;
+        flex-shrink: 0;
+        margin-top: 10px;
+
+        .image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>