uni app 微信小程序 一次性加载几千条数据优化处理

背景

公司销售订单详情里 机器明细数据超过4、5000台的时候整个页面出现空白，当然也别问我为什么要一次性加载这么多条数据，问就是需求设计如此。

分析

因为需要显示每个类别需要统计总数量、总金额，所以后台返回的数据格式是包裹两层list，前端需要遍历两次。setData一次性能超过限制、 child项没有修改为组件的方式。自定义组件的更新只在组件内部进行，不受页面其他部分内容的影响。

 

后台返回数据格式

HTML（按照之前代码优化，命名各种行内样式就懒得修改了）

<view style="background-color: #fff;padding:12rpx" v-for="(item,index) in list.sale_order_product_list"
				:key="index">
				<view class="bigListBox">
					<view class="oneTitle">
						<view style="display:flex">
							<view style="font-weight: bold;" @click="openPop(index,item)">{{item.name}}</view>
							<view class="ico_up" v-if="item.iconshow" @click="openPop(index,item)"></view>
							<view class="ico_down" v-else @click="openPop(index,item)"></view>
							<view class="pop-rightTitle">
								<view class="rightTitle" style="width: 180rpx;">共{{item.sum_num}}台</view>
								<view class="rightTitle" style="width: 220rpx;">合计￥{{item.sum_money}}</view>
							</view>
						</view>
					</view>
					<view v-for="(cList,key) in item.childObj" :key="key">
						<child-item :list="cList" :p-index="key"></child-item>
					</view>
				</view>
			</view>

子组件

<template>
	<view>
		<view style="background-color: #fff"
			v-for="(product,productIndex) in list" :key="productIndex">
			<view class="bigListBox twoListBox">
				<view class="oneTitle" style="height:80rpx;line-height: 80rpx;">
					<view style="display:flex">
						<view style="display:flex" :case_cat_id="product.case_id">
							<view style="font-weight: 500;color:#AEB1B8">{{product.title}}</view>
						</view>
						<view class="pop-rightTitle">
							<view class="rightTitle mr-12" style="width: 180rpx;">
								{{product.num}}
							</view>
							<view class="rightTitle" style="width: 220rpx;">
								{{product.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			type: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
	
			}
		},
		methods: {
		}
	}
</script>

<style>
</style>

 

getList 请求数据，遍历定义childObj ，JSON.parse JSON.stringify 对源数据进行深拷贝处理，

调用initData进行递归处理。采用递归方式对数据进行拆分赋值，减少setData数据导致白屏问题。

（1000可根据实际场景修改）

			getList() {
				ReceivableAuditShow({
					order_id: this.id
				}).then(res => {
					this.loading = true
					res.sale_order_product_list.map(item => {
						item.childObj = {}
						return item;
					})
					this.list = res;
					this.dataList = JSON.parse(JSON.stringify(res.sale_order_product_list))
					this.initData(0, 0)
					this.sum_num = res.sum_num
					this.sum_money = res.sum_money
				})
			},
			initData(pIndex, index) {
				if (this.dataList.length === pIndex) return
				this.list.sale_order_product_list[pIndex].childObj[index] = this.dataList[pIndex].child.slice(index, index + 1000)
				let i = index + 1000
				if (i >= this.dataList[pIndex].child.length) i = 0
				this.initData(i === 0 ? pIndex + 1 : pIndex, i)
			},