+
80
-

如何解决uniapp列表页分页加载更多导致长列表占用内存出现性能问题?

如何解决uniapp列表页分页加载更多导致长列表占用内存出现性能问题?


网友回复

+
0
-
<template>

	<view class="sickBody">
		<scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="getend">
			<view class="parentDom">
				<!-- <view :style="{ height: sickAllList.length * 40 + 'px' }"></view> -->
				<view :style="{ height: screenHeight + 'px' }"></view>
				<view class="positionRelative" :style="{ transform: getTransform }">
					<view v-for="item in visibleData" :key="item.id" class="height40" >{{
            item.name
          }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let testdata = [];
	let num = 30;
	let starti = 0;

	const getfakedata = function() {

		for (let i = starti; i < num; i++) {
			testdata.push({
				id: i,
				name: '疾病' + i
			});
		}
		starti = num;
		num = num + 30;

		console.log(testdata);

	}
	getfakedata();

	import {
		throttle
	} from '@/utils/throttle'; //防抖
	export default {
		props: {
			// 是否展示搜索按钮
			listData: {
				type: Array,
				default: () => []
			},
			itemSize: {
				type: Number,
				default: 40
			}
		},
		data() {
			return {

				startOffset: 0,
				start: 0,
				end: 20,
				scrollTData: 0,
				count: 20,
				remain: 8
				// testData: []
			};
		},
		computed: {
			listHeight() {
				return testdata.length * this.itemSize;
			},
			screenHeight() {
				return testdata.length * Number(this.itemSize) + 100;
			},
			// 前面预留几个
			prevCount() {
				return Math.min(this.start, this.remain);
			},
			// 后面预留几个
			nextCount() {
				return Math.min(this.remain, this.end);
			},
			getTransform() {
				return `translate3d(0,${this.startOffset}px,0)`;
			},
			visibleData() {
				return testdata.slice(this.start, Math.min(this.end, testdata.length));
			}
		},
		mounted() {

			this.sickAllList = testdata;
		},
		methods: {
			getend() {

				this.getdata();
			},
			getdata: throttle(function() {
				getfakedata();
				this.sickAllList = testdata;

			}, 800),


			scroll(e) {
				this.scrollTData = e.target.scrollTop;
				this.scrollThrottle();
			},
			/* eslint-disable */
			scrollThrottle: throttle(function() {

				let scrollTop = this.scrollTData; // e.target.scrollTop;
				// 此时的开始索引
				this.start =
					Math.floor(scrollTop / this.itemSize) - this.prevCount >= 0 ?
					Math.floor(scrollTop / this.itemSize) - this.prevCount :
					0;
				// 此时的结束索引
				this.end = Number(this.start) + Number(this.count) + Number(this.nextCount);
				// 此时的偏移量
				// console.log('位置', this.start, this.end);
				this.startOffset = Number(this.start) * Number(this.itemSize);
			}, 0)
		}
	};
</script>

<style lang="scss">
	.sickBody {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #f4f4f4;
		z-index: 99;
	}

	.infinite-list-container {
		height: 100%;
		overflow: auto;
		position: relative;
		-webkit-overflow-scrolling: touch;
	}

	.infinite-list-phantom {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: -1;
	}

	.infinite-list {
		left: 0;
		right: 0;
		top: 0;
		position: absolute;
		text-align: center;
	}

	.infinite-list-item {
		padding: 10px;
		color: #555;
		box-sizing: border-box;
		border-bottom: 1px solid #999;
	}

	.scroll-Y {
		height: 100%;
		overflow-y: scroll;
	}

	.height40 {
		height: 39px;
		line-height: 39px;
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #d2d2d2;
	}

	.positionRelative {
		width: 92%;
		margin: 0 3%;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 32rpx;
		padding-bottom: 300rpx;
		//   height: 100%;
		//   width: 100%;
	}

	.parentDom {
		position: relative;
	}
</style>

throttle.js代码请查看http://ask.bfw.wiki/question/16807885411913820019.html

我知道答案,我要回答