From c3987c13f12d3dda87da69f2e20acb2474b1f99d Mon Sep 17 00:00:00 2001
From: longjieli <1060695654@qq.com>
Date: Sat, 24 Aug 2024 09:45:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/virtualScroll1/virtualScroll1.vue | 132 +++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 components/virtualScroll1/virtualScroll1.vue

diff --git a/components/virtualScroll1/virtualScroll1.vue b/components/virtualScroll1/virtualScroll1.vue
new file mode 100644
index 0000000..0c8d85e
--- /dev/null
+++ b/components/virtualScroll1/virtualScroll1.vue
@@ -0,0 +1,132 @@
+<!-- 虚拟滚动组件 -->
+<template>
+	<view class="virtualScroll">
+		<view class="virtualScroll-title">{{ $t('page.virtualScroll.title') }}</view>
+		<!-- 滚动列表 -->
+		<view
+			:style="{ height : scrollListLength >= maxShowNumber ? `${ maxShowNumber * 160 }rpx` : `${scrollListLength * 164}rpx` }"
+			class="scroll-list">
+			<view :class="{ animate }" :style="{ transform : `translate(0rpx,${ -scrollPostion }rpx)`}">
+				<!-- 主要数据 -->
+				<view class="scroll-list-main-data">
+					<view ref="scrollItem" v-for="item in scrollList" :key="item.id" class="scroll-item">
+						<view class="user-name">{{ item.auccont }}</view>
+						<view class="money">{{ item.money }}</view>
+						<view class="time">{{ item.createTime }}</view>
+					</view>
+				</view>
+				<!-- 副本数据 -->
+				<view class="scroll-list-copy-data">
+					<view v-for="item in scrollList" :key="item.id" class="scroll-item">
+						<view class="user-name">{{ item.auccont }}</view>
+						<view class="money">{{ item.money }}</view>
+						<view class="time">{{ item.createTime }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				scrollList: [], //滚动的数据列表
+				scrollListLength: 0, //滚动数据列表数据总数
+				maxShowNumber: 3, //显示个数
+				scrollInterval: null, //控制元素滚动的定时器
+				topInterval: null, //返回顶部定时器
+				scrollPostion: 0, //滚动位置
+				animate: true, //是否显示延迟动画效果
+				lineHeight: 0, //每个滚动元素的高度
+			}
+		},
+		mounted() {
+			this.getScrollList()
+		},
+		methods: {
+			//获取滚动列表
+			async getScrollList() {
+				this.request('getIndexScroll').then(res => {
+					if (res.code == 200) {
+						this.scrollList = res.result
+						this.scrollListLength = res.result.length
+						this.scroll()
+					}
+				})
+			},
+
+			//控制元素滚动
+			scroll() {
+				this.scrollInterval = setInterval(() => {
+					this.animate = true
+					this.scrollPostion += 160
+				}, 1000)
+
+				this.topInterval = setInterval(() => {
+					if (this.scrollPostion > this.scrollListLength * 160) {
+						this.animate = false
+						clearInterval(this.scrollInterval)
+						clearInterval(this.topInterval)
+						this.scrollPostion = 0
+						this.scroll()
+					}
+				}, 100)
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.virtualScroll {
+		margin: 0rpx auto;
+		width: 96%;
+
+		.virtualScroll-title {
+			display: flex;
+			align-items: center;
+			font-size: 36rpx;
+			height: 80rpx;
+			color: $uni-bg-color-app;
+		}
+
+		.scroll-list {
+			overflow: hidden;
+
+			// 主要数据 、副本数据
+			.scroll-list-main-data,
+			.scroll-list-copy-data {
+				padding-top: 20rpx;
+
+				.scroll-item {
+					display: flex;
+					align-items: center;
+					height: 140rpx;
+					width: 98%;
+					margin-left: 1%;
+					margin-bottom: 20rpx;
+					border-radius: 10rpx;
+					box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, .1),
+						-4rpx -4rpx 10rpx rgba(0, 0, 0, .1);
+
+					view {
+						flex: 1;
+						text-align: center;
+
+						&:nth-child(3) {
+							flex: 2;
+						}
+					}
+				}
+
+			}
+
+			.animate {
+				transition: all .4s linear;
+			}
+
+		}
+	}
+</style>
\ No newline at end of file