解决微信小程序数据渲染缓慢或卡顿的方法 (uniapp vue3)-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决微信小程序数据渲染缓慢或卡顿的方法 (uniapp vue3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在微信小程序中渲染数据时通常会使用setData方法，但是setData对数据是有影响的，单次设置的数据不能超过1024kB，否则就会出现卡顿甚至有时会导致小程序闪退等现象。而我们平时在实现业务时，一般会采取数据分页而防止大量数据渲染导致小程序白屏/卡顿，例如在一些商城平台需要滚动时切换菜单，也需要回显购物车数据的情况下，无法进行分页处理，我的方法是把从接口获取到的数据进行格式化处理后，进行递归调用(递归一次进行一次setDate从而不进行一次性渲染大量数据)，代码如下：

<template>
	<scroll-box>
		<!-- 菜单 -->
		<view>
			<view v-for="(item,index) in truthfulData" :key="item.id">
				{{item.title}}
			</view>
		</view>
		
		<!-- 子列表 -->
		<view>
			<!-- 菜单 -->
			<view v-for="(item,index) in truthfulData" :key="item.id">
				{{item.title}}
			</view>
			<view>
				<!-- 子列表 -->
				<view v-for="(childItem,childIndex) in itme.childList" :key="childItem.id">
					{{childItem.name}}
				</view>
			</view>
		</view>
	</scroll-box>
</template>

<script setup lang="ts">
// 获取数据列表
const truthfulData = ref(null) // 真实渲染数据
// 处理数据模型 [{id,title,childList:[]},{id,title,childList:[]}...]
async function getDate() {
	try {
		// 1. 通过接口调用获取需要渲染的数据列表 
		const dateList= await getDateList()
		// 2. 调用setDate优化函数
		truthfulData.value = [] 
		injectDate(dateList.data,0,0)
		// 3. 进行渲染完成后的容器数据获取 - 小程序 uni.createSelectorQuery().select("#id").boundingClientRect(data=>{...}).exec() 是异步方法需要在数据渲染后执行
		nextTick(() => {
			// ... 
		})
		 
	} catch (e) {
		console.log(e);
	}
}

// 优化渲染数据 
function injectDate(virtuallyDate : [any], pIndex : number, index : number) {
	if (virtuallyDate.length === pIndex) return

	// 当菜单数据为空时
	if (!truthfulData.value[pIndex]) {
		// 数据最外层菜单赋值
		truthfulData.value[pIndex] = {
			id: virtuallyDate[pIndex].id,
			title: virtuallyDate[pIndex].title,
			childList: [] // 需要渲染的子集数据
		}
	}

	// 添加数据
    truthfulData.value[pIndex].childList.push(...virtuallyDate[pIndex].childList.slice(index, index + 20)) // 20 根据自己的数据大小拟定
    let i = index + 20 
	if (i >= virtuallyDate[pIndex].childList.length) i = 0  
	initCommodityList(virtuallyDate , i === 0 ? pIndex + 1 : pIndex, i) // 递归调用
}
</script>

递归setDate 渲染之后可用正常获取容器的宽高进行进一步业务扩展
大致效果如下:
uniapp数据加载缓慢,微信小程序,uni-app,小程序
建议搭配图片懒加载使用，防止大量图片同时请求导致服务器承受不住文章来源地址https://www.toymoban.com/news/detail-713352.html