1

MrShi

2024-10-25 1e943f08399e5d04a63580622080ebbb09d138bc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<template>
    <!-- #ifndef APP-NVUE -->
    <view class="uni-list uni-border-top-bottom">
        <view v-if="border" class="uni-list--border-top"></view>
        <slot />
        <view v-if="border" class="uni-list--border-bottom"></view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
    <!-- #endif -->
</template>
 
<script>
/**
 * List 列表
 * @description 列表组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
 * @property {String}     border = [true|false]         标题
 */
export default {
    name: 'uniList',
    'mp-weixin': {
        options: {
            multipleSlots: false
        }
    },
    props: {
        enableBackToTop: {
            type: [Boolean, String],
            default: false
        },
        scrollY: {
            type: [Boolean, String],
            default: false
        },
        border: {
            type: Boolean,
            default: true
        }
    },
    // provide() {
    //     return {
    //         list: this
    //     };
    // },
    created() {
        this.firstChildAppend = false;
    },
    methods: {
        loadMore(e) {
            this.$emit('scrolltolower');
        }
    }
};
</script>
<style lang="scss" >
$uni-bg-color:#ffffff;
$uni-border-color:#e5e5e5;
.uni-list {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    background-color: $uni-bg-color;
    position: relative;
    flex-direction: column;
}
 
.uni-list--border {
    position: relative;
    /* #ifdef APP-NVUE */
    border-top-color: $uni-border-color;
    border-top-style: solid;
    border-top-width: 0.5px;
    border-bottom-color: $uni-border-color;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    /* #endif */
    z-index: -1;
}
 
/* #ifndef APP-NVUE */
 
.uni-list--border-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
    z-index: 1;
}
 
.uni-list--border-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
}
 
/* #endif */
</style>