ios闪屏问题 vue_解决vue更新默认值时出现的闪屏问题

在Vue项目中，对于一个展示用户个人信息的页面。有以下需求，需要判断用户个人信息是否填充过，如果填充过，需要在页面中展示已填充项(未填充项不展示)；如果未填充过，需要在页面中显示另外一种元素(提示用“去完善”个人信息)。

这时候，我们在页面中有如下元素：

// 这里展示用户已填充的信息内容

暂无基本资料数据

去完善

data中userExist有默认值——false：

export default {

name: "healthData",

data() {

return {

userExist: false, // 标记用户是否已填充个人信息

}

};

而用户到底有没有填充过个人信息是需要在mounted中通过接口从后端获取数据才可以知道，这里如果是填充过，后端会返回状态码200；如果没有填充过，后端会返回状态码201。

axios.get('/userInfo').then(res => {

if (res.data.data && res.data.status == 200) {

this.userExist = true

// 这里填充对所返回用户数据的解析

}

在上面这种代码情况下，因为userExist默认值为false，所以默认需要展示无数据的页面元素。又因为userExist值得变更需要通过axios请求的方式获取，就会有延时问题，即产生页面闪烁的情况。

解决方式：

这种问题我们就可以通过如下方式解决，因为无数据是页面中的元素较少，我们可以跟它们中的图片路径、文字等内容的初始值设置为空，请求结束时再为其重新赋值。

页面元素部分：

// 这里展示用户已填充的信息内容

在data中进行声明：

export default {

name: "healthData",

data() {

return {

userExist: false, // 标记用户是否已填充个人信息

noDataTip: { // 用户未填写个人信息时要显示的页面元素的填充内容

imgSrc: '',

tipInfo: '',

jumpInfo: ''

}

};

重新赋值的过程：

axios.get('/userInfo').then(res => {

if (res.data.status == 10001) {

return context.noDataTip = {

imgSrc: require('../../images/no_data.png'),

tipInfo: '暂无基本资料数据',

jumpInfo: '去完善'

}

if (res.data.data && res.data.status == 200) {

this.userExist = true

// 这里填充对所返回用户数据的解析

}

通过这种方式，用户就不会看到闪烁的情况了。但是，上面这种方式有一个值得注意的地方，img标签的src属性如果想要通过属性绑定的方式给其动态赋值，有两种处理方式：1.通过上面代码中的 require('') 方式；2.通过书写绝对路径的方式。

ios闪屏问题 vue_解决vue更新默认值时出现的闪屏问题相关推荐

解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory...
解决Vue编译和打包时频繁内存溢出情况CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 如上图所示:频繁出现此 ...
JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
vue实现分屏_WebRTC如何在Vue.js 配合video标签实现多分屏功能？
TSINGSEE青犀视频研发的视频平台都支持分屏播放,当我们需要通过新的框架来搭建一套新的产品的时候,就要考虑到如何通过新的方式来构建这样一套多屏分割的界面. 我们上次在<我之前做过的所有产品都 ...
lombok的使用详解，解决@Builder.Default默认值问题
前言 Lombok是一款Java开发插件,使得Java开发者可以通过其定义的一些注解来消除业务工程中冗长和繁琐的代码,尤其对于简单的Java模型对象(POJO).在开发环境中使用Lombok插件后,J ...
Lombok的使用详解（最详尽的解释，覆盖讲解所有可用注解），解决@Builder.Default默认值问题...
原文:https://blog.csdn.net/f641385712/article/details/82081900 前言 Lombok是一款Java开发插件,使得Java开发者可以通过其定义的一 ...
lombok的使用详解（最详尽的解释，覆盖讲解所有可用注解），解决@Builder.Default默认值问题
https://blog.csdn.net/f641385712/article/details/82081900 前言 Lombok是一款Java开发插件,使得Java开发者可以通过其定义的一些注解 ...
【小家Java】Lombok的使用详解（最详尽的解释，覆盖讲解所有可用注解），解决@Builder.Default默认值问题
相关阅读 [小家java]java5新特性(简述十大新特性) 重要一跃 [小家java]java6新特性(简述十大新特性) 鸡肋升级 [小家java]java7新特性(简述八大新特性) 不温不火 [小 ...
lightroom 闪退_王者荣耀：IOS部分机型闪退问题已解决，更新方法公布
从1月17日起,历经4天时间,i6.i6p闪退问题终于得到了解决,现在公布更新方法,以下为官方原文: 亲爱的召唤师: 为了优化iOS部分机型(iPhone6.6P等)卡顿.闪退的情况,我们于1月21日 ...
计算机连接投影仪后黑屏咋调试,解决办法：与投影机相连的笔记本电脑黑屏的原因和解决方法[图]...
笔记本电脑连接到投影仪后,出现黑屏.到底是怎么回事?我怎么解决这个问题?不用担心,接下来,我将与您分享笔记本电脑连接到投影仪时黑屏问题的两个常见原因. 原因一.没有切换投影模式笔记本计算机通常具有四 ...

ios闪屏问题 vue_解决vue更新默认值时出现的闪屏问题

ios闪屏问题 vue_解决vue更新默认值时出现的闪屏问题相关推荐

最新文章

热门文章