uniapp 微信小程序请求列表数据添加loading增强体验感、减少卡顿

公孙元二

已于 2022-05-09 15:01:33 修改

阅读量1.4k

点赞数

分类专栏：微信小程序/开发者工具/uniapp/HBuilder 文章标签：微信小程序前端 vue.js

于 2022-05-09 14:56:19 首次发布

本文链接：https://blog.csdn.net/amnesiac666/article/details/124666311

版权

本文介绍如何在uniapp微信小程序中通过设置`isReady`变量来增强用户体验，减少数据加载时的卡顿。利用loading指示器在请求列表数据时显示，待数据加载完成后再隐藏，从而提升应用的流畅感。

摘要由CSDN通过智能技术生成

设置一个变量isReady

<template>
	<view class="container">
		<!-- 内容区域 -->
		<view v-if="isReady" class="order_centext" :style="{height:windowHeight - 80 + 'px'}">
			<swiper :current="tabIndex" @change="tabChange" :style="{height:windowHeight - 80 + 'px'}">
				<view v-for="(item,index) in dataArr" :key="index" >
					<swiper-item style="height: 100%;overflow-y: auto;">
						<!-- 有数据 -->
						<template v-if="item.dataSet.length !== 0">
							<index-item :itemdata="item.dataSet"></index-item>
						</template>
						<!-- 无数据 -->
						<template v-if="item.dataSet.length === 0">
							<view style="margin-top: 20rpx;" :style="{height:noDataContentHeight}" class