You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.0 KiB
147 lines
3.0 KiB
<template>
|
|
<!-- #ifndef APP-NVUE -->
|
|
<view
|
|
class="uv-list"
|
|
:style="[$uv.addStyle(customStyle)]"
|
|
>
|
|
<view
|
|
v-if="border"
|
|
class="uv-list--border-top"
|
|
:style="[{ 'background-color': borderColor }]"
|
|
></view>
|
|
<slot />
|
|
<view
|
|
v-if="border"
|
|
class="uv-list--border-bottom"
|
|
:style="[{ 'background-color': borderColor }]"
|
|
></view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
<list
|
|
:bounce="true"
|
|
:scrollable="true"
|
|
show-scrollbar
|
|
:render-reverse="false"
|
|
class="uv-list"
|
|
:class="{ 'uv-list--border': border }"
|
|
:style="[
|
|
{ 'border-top-color': borderColor, 'border-bottom-color':borderColor },
|
|
$uv.addStyle(customStyle)
|
|
]"
|
|
:enableBackToTop="false"
|
|
:loadmoreoffset="15"
|
|
@scroll="scroll"
|
|
@loadmore="loadMore">
|
|
<slot />
|
|
</list>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
|
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
|
/**
|
|
* List 列表
|
|
* @description 列表组件
|
|
* @tutorial https://www.uvui.cn/components/list.html
|
|
* @property {Boolean} border = [true|false] 是否显示边框
|
|
* @property {String} borderColor 边框颜色
|
|
* @property {String} direction 排版方向，默认row，列表里面使用其他组件 最好设置成column
|
|
*/
|
|
export default {
|
|
name: 'uv-list',
|
|
mixins: [mpMixin, mixin],
|
|
'mp-weixin': {
|
|
options: {
|
|
multipleSlots: false
|
|
}
|
|
},
|
|
props: {
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#dadbde'
|
|
},
|
|
// 排版方向，默认row，列表里面使用其他组件 最好设置成column
|
|
direction: {
|
|
type: String,
|
|
default: 'row'
|
|
},
|
|
// 内边距
|
|
padding: {
|
|
type: [String,Number],
|
|
default: '20rpx 30rpx'
|
|
}
|
|
},
|
|
created() {
|
|
this.firstChildAppend = false;
|
|
},
|
|
computed: {
|
|
parentData() {
|
|
return [this.direction,this.padding];
|
|
}
|
|
},
|
|
methods: {
|
|
loadMore(e) {
|
|
this.$emit('scrolltolower');
|
|
},
|
|
scroll(e) {
|
|
this.$emit('scroll', e);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
|
|
|
.uv-list {
|
|
position: relative;
|
|
@include flex(column);
|
|
background-color: #fff;
|
|
}
|
|
|
|
.uv-list--border {
|
|
position: relative;
|
|
/* #ifdef APP-NVUE */
|
|
border-top-color: $uv-border-color;
|
|
border-top-style: solid;
|
|
border-top-width: 0.5px;
|
|
border-bottom-color: $uv-border-color;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 0.5px;
|
|
/* #endif */
|
|
z-index: -1;
|
|
}
|
|
|
|
/* #ifndef APP-NVUE */
|
|
|
|
.uv-list--border-top {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
background-color: $uv-border-color;
|
|
z-index: 1;
|
|
}
|
|
|
|
.uv-list--border-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
height: 1px;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
background-color: $uv-border-color;
|
|
}
|
|
|
|
/* #endif */
|
|
</style>
|