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

<!-- 首页虚拟滚动 -->
<template>
	<view class="virtualScroll content">
		<view class="success_info_body">
			<!-- 标准title可以调用组件 -->
			<view class="title_view">
				{{ $t('page.virtualScroll.title') }}
			</view>

			<!-- 参数名称、列数根据实际情况调整 -->
			<view class="table_body">
				<view class="table_main_body">
					<view class="table_inner_body" :class="{ animate }" :style="{top: tableTop + 'px'}">
						<view class="table_tr" v-for="(item,index) in tableList" :key="index">
							<view class="tr1 tr">{{item.planNo}}</view>
							<view class="tr2 tr">{{item.type}}</view>
							<view class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</view>
							<view class="tr3 tr" v-else>-</view>
							<view class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</view>
							<view class="tr4 tr" v-else>-</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableTimer: null,
				tableTop: 0,
				tableList: [{
						"process": 0.0000,
						"planNo": "BP2022060701",
						"endDate": "2022-06-07",
						"type": "block",
						"startDate": "2022-06-07"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					},
					{
						"process": 0.0000,
						"planNo": "WP2022061301",
						"endDate": "2022-06-13",
						"type": "wallboard",
						"startDate": "2022-06-13"
					}
				],

				tableListSize: 0,
				componentTimer: null,

				//需要根据情况设置的参数
				visibleSize: 3, //容器内可视最大完整行数
				lineHeight: this.getRpxToPx(162), //每行的实际高度（包含margin-top/bottom,border等）
				componentTimerInterval: 3600000, //刷新数据的时间间隔
				tableTimerInterval: 1000, //向上滚动 1px 所需要的时间，越小越快，推荐值 100
				animate : true
			}
		},
		//如果没有父元素传值，将watch内的内容搬至mounted中即可
		props: ["activeFactoryId"],
		watch: {
			activeFactoryId(val, oldVal) {
				clearInterval(this.componentTimer);
				this.bsGetProductProcess();
				this.componentTimerFun();
			}
		},
		mounted() {
			clearInterval(this.componentTimer);
			this.bsGetProductProcess();
			this.componentTimerFun();
		},
		beforeDestroy() {
			clearInterval(this.componentTimer);
			clearInterval(this.tableTimer);
		},
		methods: {
			//调用数据接口，获取列表数据
			bsGetProductProcess() {
				clearInterval(this.tableTimer);
				this.tableTop = 0;
				if (this.activeFactoryId != "") {
					// this.request('forgetPass').then(res => {
					// 	if(res.code == 200){
					// 		this.serverList = res.result
					// 	}
					// })
					this.tableActionFun();
				}
			},
			tableActionFun() {
				this.tableListSize = this.tableList.length; //数据总数
				if (this.tableListSize > this.visibleSize) { //总数大于容器内可视最大完整行数
					this.tableList = this.tableList.concat(this.tableList); //拼接一个数组数据
					this.tableTimerFun();
				} else {
					this.fillTableList();
				}
			},
			//当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
			fillTableList() {
				var addLength = this.visibleSize - this.tableListSize;
				for (var i = 0; i < addLength; i++) {
					this.tableList.push({
						planNo: "-",
						type: "-",
						startDate: "-",
						endDate: "-",
						process: "-"
					});
				}
			},
			//控制元素滚动
			tableTimerFun() {
				var count = 0;
				this.tableTimer = setInterval(() => {
					if (count < (this.tableList.length / 2) * this.lineHeight) {
						this.animate = true
						this.tableTop -= this.lineHeight;
						count += this.lineHeight;
					} else {
						this.animate = false
						this.tableTop = 0;
						count = 0;
					}
				}, this.tableTimerInterval);
			},

			//更新数据
			componentTimerFun() {
				this.componentTimer = setInterval(() => {
					this.bsGetProductProcess();
				}, this.componentTimerInterval);
			},

			//转换rpx单位
			getRpxToPx(rpx) {
				// 获取系统信息，这里使用同步方法uni.getSystemInfoSync  
				const systemInfo = uni.getSystemInfoSync();
				// 假设设计稿宽度为750rpx  
				const designWidth = 750;
				// 屏幕宽度，单位为px  
				let screenWidth = systemInfo.screenWidth;
				//防止屏幕过大时转换的值太大。超过960就设置screenWidth为版心宽度
				if(screenWidth > 960){
					screenWidth = 375
				}
				// 计算1rpx等于多少px  
				const rpxToPx = screenWidth / (designWidth / rpx);
				console.log(rpxToPx);
				return rpxToPx;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.virtualScroll {
		width: 100%;
		height: 560rpx;
	}

	.content {
		width: 96%;
		margin: 0 auto;
		color: $uni-bg-color-app;
	}

	.title_view {
		width: 100%;
		font-size: 32rpx;
	}

	.table_body {
		width: 100%;
		margin-top: 15rpx;
	}

	.tr {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0 5px;
		text-align: center;
		font-size: 30rpx;
	}

	.tr1 {
		width: 28%;
	}

	.tr2 {
		width: 15%;
	}

	.tr3 {
		width: 35%;
		font-size: 24rpx;
	}

	.tr4 {
		flex: 1;
	}

	.table_main_body {
		width: 100%;
		height: 480rpx;
		overflow: hidden;
		position: relative;
	}

	.table_inner_body {
		width: 98%;
		position: absolute;
		left: 1%;
	}
	
	.animate{
		transition: all .3s;
	}

	.table_tr {
		display: flex;
		align-items: center;
		height: 140rpx;
		color: $uni-bg-color-app;
		font-size: 30rpx;
		margin-bottom: 20rpx;
		// box-shadow: 2rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, .1),
		// 	-2rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		background: $uni-bg-color;
		border: 2rpx solid #ccc;
	}
</style>