；优化，添加组件库

2026-01-08 11:07:35 +08:00
1 parent 1facf7d6c8
commit 85c436551f
@@ -0,0 +1,147 @@
+<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>