uav-uniapp-demo-24-8-18/components/virtualScroll1/virtualScroll1.vue

<!-- 虚拟滚动组件 -->
<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>