You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
2.0 KiB
Vue
109 lines
2.0 KiB
Vue
<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>
|