cmc-oa/oa-ui-app/uni_modules/uv-list/components/uv-list/uv-list.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>