+
95
-

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

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


网友回复

+
15
-
<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 * t...

点击查看剩余70%

我知道答案,我要回答