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请求的方式获取，就会有延时问题，即产生页面闪烁的情况。

解决方式：

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

页面元素部分：

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

{{noDataTip.tipInfo}}

{{noDataTip.jumpEditUser}}

在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.通过书写绝对路径的方式。