解决uniapp微信小程序v-if（v-else）闪屏现象

在页面中使用 v-if 和 v-else 来根据数据的total来判断是渲染数据还是显示暂无，首先，在data中声明一个对象（如：tag）值为0，在获取完数据的时候设置（tag）值等于1，然后在页面中把（tag）值也加入判断条件中（如：v-if="tag === 1 && total > 0"），最后 v-else 就不要用了，替换成 v-if（判断 tag 和原本的判断内容）...

xbcmfy99

4241人浏览 · 2022-06-07 14:27:47

xbcmfy99 · 2022-06-07 14:27:47 发布

项目场景：

在页面中使用 v-if 和 v-else 来根据数据的total来判断是渲染数据还是显示暂无，

问题描述

进入页面会出现闪屏现象，先显示暂无数据的图片，再渲染数据列表。

解决方案：

首先，在data中声明一个对象（如：tag）值为0，在获取完数据的时候设置（tag）值等于1，然后在页面中把（tag）值也加入判断条件中（如：v-if=" tag === 1 && total == ' ' "），最后 v-else 就不要用了，替换成 v-if（判断 tag 和原本的判断内容）

<view class="history-list" v-if="tag === 1 && total == ''">
			<image class="logo-none u-m-20" src="../../static/images/history/logo-noData.png" mode="widthFix"></image>
			<text class="u-font-gray">暂无搜索历史</text>
		</view>