分享一个自用实用骨架屏实现方案！
前端下午茶
共 18801字，需浏览 38分钟
·
2024-04-15 07:55
作者：背对疾风 原文：https://juejin.cn/post/6945748911147450405
在我的前前公司，接口经常出问题，基本每个接口都会出问题，这就要求我们前端对每个接口都要做错误信息的提醒，非常麻烦，当然这也是必须的，所以就想着做一个组件能够帮我们自动处理和展示这些错误信息，当时开发用的是Flutter，所以应该叫widget。后来又做vue和小程序了，想着能不能把那个解决方法带到vue上来，于是就有了这个
功能
-
以骨架屏的形式展示加载中，而且可以丝滑过渡到加载完成 -
加载失败展示错误信息
先看效果
原理
一般情况下，我们请求接口然后渲染数据时会先判断是否有数据来来渲染不同的视图，比如加载的展位图，空数据的占位图，有数据时就展示数据。
ClamView的思路则是 数据加载未完成时也给渲染的模板一个数据，然后通过给负责显示数据span、img等标签设置背景色和字体颜色来达到“骨架”的效果，待数据请求完成后，再使用动画将骨架隐去，完成过渡。
代码
-
ClamView.tsx
ClamView 需要传入一个 ResponseBean点此了解[1] 对象 res 来判断当前数据的状态,还需要传入一个加载过程中用到的假数据 emptyData 用来撑起你的 span 标签
import { defineComponent,computed } from 'vue';
import {ResponseBean} from "bdjf_http";
import './clam_view.css'
import './skeleton.css'
/**
* 定义 ClamView 的四种状态
* 1. LOADING res 为空或者res.code === -100 时状态为LOADING，此时显示骨架屏
* 2. EMPTY res.code === 0 且 res.data 为空时
* 3. SHOW res.code === 0 且 res.data 不为空时
* 4. ERROR res.code ！== 0 时
**/
type ViewStatusType = 'LOADING'|'EMPTY'|'SHOW'|'ERROR';
export default defineComponent({
name:'ClamView',
props:{
res: {
type:ResponseBean,
default:()=>{
// 默认显示一个loading
return new ResponseBean().loading();
}
},
showLoading :{
type: Boolean,
default:()=>{
return false;
}
},
emptyText:{
type: String,
default:()=>{
return '暂无数据';
}
},
emptyData:{
type:Object,
default:()=>{
return {}
}
},
noPackage:{
type: Boolean,
default:()=>{
return false;
}
}
},
setup(props,{ slots }) {
// 根据 res 的状态来判断如何显示
const viewStatusAdapter = (response: ResponseBean): ViewStatusType => {
// console.log('----viewStatusAdapter----',response)
if (props.showLoading) {
return "LOADING";
}
if (!response) {
return "LOADING";
}
switch (response.code) {
case 0:
if (!response.data || response.data.length === 0) {
return "EMPTY";
} else {
return "SHOW";
}
case -100:
return "LOADING";
default:
return "ERROR";
}
}
// 用 computed 包一下
const viewStatus = computed<ViewStatusType>(()=>{
return viewStatusAdapter(props.res)
})
const noDataView = (text:string)=>{
return (
<div class="empty_view col-center item-center">
{text}
</div>
)
}
const emptyView = ()=>{
if(viewStatus.value === 'EMPTY'){
return slots.empty?slots.empty():noDataView(props.emptyText);
}
}
const errorView = ()=>{
if(viewStatus.value === 'ERROR'){
return slots.error?slots.error():noDataView(props.res.msg);
}
}
return () => {
if(viewStatus.value === 'EMPTY'){
return emptyView();
}else if(viewStatus.value === 'ERROR'){
return errorView();
}else {
// noPackage 为 false 时，ClamView将会在 slots 外面包一层 div ，通过给div更换样式来实现状态切换；
// 为 true 时，将不会包裹div，会通过 vClass 属性传替给 需要使用的地方绑定样式进行切换
if(props.noPackage){
return slots.default({
data:viewStatus.value==='LOADING'?props.emptyData:props.res.data,
vClass:viewStatus.value==='LOADING'?'skeleton-view-empty-view':'skeleton-view-default-view'
})
}else {
return (
<div class={viewStatus.value==='LOADING'?'skeleton-view-empty-view':'skeleton-view-default-view'}>
{slots.default({
data:viewStatus.value==='LOADING'?props.emptyData:props.res.data
})}
</div>
)
}
}
}
}
})
-
skeleton.css
/**
正常状态下的 样式，
设置 transition 来让过渡平滑
*/
.skeleton-view-default-view span,
.skeleton-view-default-view a,
.skeleton-view-default-view img
{
transition: all .7s ease;
background-color: rgba(0, 0, 0, 0);
}
/**
加载时的样式，首先设置不监听任何事件，省的用户乱点
然后给 span、a、img标签设置可以动的背景，字体颜色设成透明，
就形成 “骨架” 了
*/
.skeleton-view-empty-view {
pointer-events: none;
}
.skeleton-view-empty-view span,
.skeleton-view-empty-view a {
color: rgba(0, 0, 0, 0) !important;
border-radius: 2px;
background: linear-gradient(
-45deg,
#F5F5F5 0%,
#DCDCDC 25%,
#F5F5F5 50%,
#DCDCDC 75%,
#F5F5F5 100%
);
animation: gradientBG 4s ease infinite;
background-size: 400% 400%;
background-color:#DCDCDC;
transition: all 1s ease;
}
.skeleton-view-empty-view img {
/* 这里是一个透明的小图片 */
content: url(../../assets/img/no_url.png);
border-radius: 2px;
background: linear-gradient(
-45deg,
#F5F5F5 0%,
#DCDCDC 25%,
#F5F5F5 50%,
#DCDCDC 75%,
#F5F5F5 100%
);
animation: gradientBG 4s ease infinite;
background-size: 400% 400%;
background-color:#DCDCDC;
transition: all 1s ease;
}
@keyframes gradientBG {
0% {
background-position: 100% 100%;
}
50% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
-
clam_view.css
.clam-box{
width: 100%;
height: 100%;
}
.empty_view{
padding-top: 100px;
width: 100%;
height: 100%;
padding-bottom: 100px;
}
.empty_img{
width: 310px;
height: 218px;
}
.trip_text{
font-size: 28px;
color: #999999;
}
使用
<template>
<div class="home col">
<clam-view :res="response" v-slot="{data}" :empty-data="emptyData">
<p><span>{{data.name}}</span></p>
<p>Home</p>
<router-link to="/about" >{{data.route}}</router-link>
</clam-view>
</div>
</template>
ts
复制代码
<script lang="ts">
import { defineComponent,reactive,toRefs,onMounted } from 'vue';
import {ResponseBean} from 'bdjf_http'
export default defineComponent({
name: 'Home',
setup(){
const state = reactive({
response:new ResponseBean().loading()
})
onMounted(()=>{
setTimeout(()=>{
state.response = new ResponseBean(0,'',{
name:'Home',
route:'About'
})
},2500)
})
const emptyData = {
name:'站位文字',
route:'站位文字'
}
return {
...toRefs(state),
emptyData
}
}
});
</script>
<style scoped>
</style>
配合bdjf_http
如果你配合 bdjf_http 使用，就能用极少的代码完成所需功能 点此了解bdjf\_http[2]
post(API.getData())
.then(res => state.response = res;)
https://juejin.cn/post/6945373247659573278
[2]https://juejin.cn/post/6945373247659573278
最后
如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：
点个「喜欢」或「在看」，让更多的人也能看到这篇内容
我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
评论