在Vue项目中，当需要根据用户信息填充状态展示不同页面元素时，可能出现页面闪烁问题。解决方案是在初始化时将无数据元素的内容设为空，然后在axios请求后根据后端返回的状态码动态赋值。这样可以避免用户看到页面内容的瞬间切换，提高用户体验。关键操作包括使用`require()`预加载图片，以及在数据获取后更新页面元素。
在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.通过书写绝对路径的方式。
扫一扫
2848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
