盘龙城做网站/电商网站前端页面内容编写

一：避免请求数据前出现空状态闪现问题

在项目中，经常会遇到这样的场景，比如有一个购物车页面。当购物车无数据时，会有一个空的状态，而当我们请求数据之前，因为原本购物车的数据的初始值为空数组，会导致这个空状态先闪现出来，然后再加载出来。体验非常不好。而导致这样的原因的结构一般是这样的：

<tempalte><div><div v-if="list.length>0"><div v-for="item in shopcartList" :key="item.id" >{{item.prodName}}</div></div><div class="empty" v-else>暂无数据</div></div></template>
<script>data(){return{list:[]}},methods:{getList(){fetch(...).then(res=>{this.list=res.data.list}).catch(err=>throw new Error(err))    }}
</script>

空状态的展示完全依赖list这个数组是否有值，而默认是空，所以导致初始化的时候也展示出来。闪了一下。而我们仔细想想empty空状态展示的真正逻辑,它应该是请求了数据而且数据为空的时候才展示。所以我们需要再有一个标识，让它感知是真正请求了接口并且数据是空，而不是我们初始化默认给他赋值的[]。所以我们再加一个标识，让它去完成这个判断。

<template><div><h2>home</h2><div class="item-wrap" v-if="list.length > 0"><p v-for="item in list" :key="item.id">{{item.name}}</p></div><div class="empty" v-if="list.length===0 && emptyFlag==1">暂无数据</div></div></template><script  setup>
import request from "../utils/axios"
import { reactive,ref } from "vue"const list=ref([])
let emptyFlag=ref(0)const getList=()=>{emptyFlag.value=0;request("/api/list","GET").then(res=>{emptyFlag.value=1list.value=res.data.list||[]}).catch(err=>{throw new Error(err)})
}
getList()
</script><style  scoped>
.item-wrap{width: 600px;margin: 20px auto;
}
.item-wrap p{padding: 20px 0 ;box-shadow:  0 0 3px #ccc;
}
</style>

emptyFlag再我们每次请求这个接口的时候都会去做一个赋值，让它参与这个接口请求的过程。v-if="list.length===0 && emptyFlag==1" 让它只有在请求数据以后而且数据为【】的情况下才出现

二：避免请求数据前出现页面出现{{item.name}}

当请求获取数据时，如果接口比较缓慢，会出现页面展示{{item.name}}这样的情况，我们可以通过v-cloak指令+[v-cloak]:{display:none}来实现：

<template>
<div><p v-cloak>姓名:{{info.name}}</p><p v-cloak>年龄:{{info.age}}</p><p v-cloak>email:{{info.email}}</p>
</div>
</template><style>[v-cloak]{display: none;
}</style>