148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<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>
|