<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>
|
