vant 骨架屏

Vant 骨架屏是一种用于提升用户体验的新型技术，它可以帮助开发者在页面加载时显示一个占位图，以此来提升用户体验。

Vant 骨架屏的优势在于它可以有效减少用户等待时间，并且能够让用户看到页面的大致布局，这样就能够让用户对当前页面有一个初步的了解。

Vant 骨架屏使用起来也很方便，开发者可以通过 Vant 的 Skeleton 组件来快速实现。使用 Skeleton 组件时，开发者可以通过传入不同的 props 来定制不同的样式，例如 row 和 row-width 就是用来定义行数和行宽度的。

<van-skeleton 
  row="3"  // 行数 
  row-width="100px" // 行宽度 
/>  

此外，Vant 还支持使用 slot 来定制更复杂的样式：

   <van-skeleton>  

    <template slot="avatar">  

      <van-skeleton-circle />  

    </template>  

    <template slot="title">  

      <van-skeleton-rect width="50%" />  

    </template>  

    <template slot="content">  

      <van-skeleton-rect width="70%" />  

      <van-skeleton-rect width="30%" />  

    <
Vant3 Skeleton 骨架屏
介绍


用于在内容加载过程中展示一组占位图形。

实例演示



引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from "vue";
import { Skeleton } from "vant";

const app = createApp();
app.use(Skeleton);



代码演示


基础用法

通过 title 属性显示标题占位图，通过 row 属性配置占位段落行数。
<van-skeleton title :row="3" />



显示头像

通过 avatar 属性显示头像占位图。
<van-skeleton title avatar :row="3" />



展示子组件

将 loading 属性设置成 false 表示内容加载完成，此时会隐藏占位图，并显示 Skeleton 的子组件。
<van-skeleton title avatar :row="3" :loading="loading">
  <div>实际内容</div>
</van-skeleton>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const loading = ref(true);

    onMounted(() => {
      loading.value = false;
    });

    return {
      loading,
    };
  },
};



API


Props


    

        

            
参数
            
说明
            
类型
            
默认值
        
    
    

        

            
row
            
段落占位图行数
            
number | string

            
            
0

            
        
        

            
row-width
            
段落占位图宽度，可传数组来设置每一行的宽度
            
number | string |
(number | string)[]

            
            
100%

            
        
        

            
title
            
是否显示标题占位图
            
boolean

            
            
false

            
        
        

            
avatar
            
是否显示头像占位图
            
boolean

            
            
false

            
        
        

            
loading
            
是否显示骨架屏，传 false 时会展示子组件内容
            
boolean

            
            
true

            
        
        

            
animate
            
是否开启动画
            
boolean

            
            
true

            
        
        

            
round
            
是否将标题和段落显示为圆角风格
            
boolean

            
            
false

            
        
        

            
title-width
            
标题占位图宽度
            
number | string

            
            
40%

            
        
        

            
avatar-size
            
头像占位图大小
            
number | string

            
            
32px

            
        
        

            
avatar-shape
            
头像占位图形状，可选值为 square

            
            
string

            
            
round

            
        
    


样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考ConfigProvider 组件。

    

        

            
名称
            
默认值
            
描述
        
    
    

        

            
--van-skeleton-row-height
            
16px

            
            
-
        
        

            
--van-skeleton-row-background-color
            
var(--van-active-color)

            
            
-
        
        

            
--van-skeleton-row-margin-top
            
var(--van-padding-sm)

            
            
-
        
        

            
--van-skeleton-title-width
            
40%

            
            
-
        
        

            
--van-skeleton-avatar-size
            
32px

            
            
-
        
        

            
--van-skeleton-avatar-background-color
            
var(--van-active-color)

            
            
-
        
        

            
--van-skeleton-animation-duration
            
1.2s

            
            
-