Skeleton 骨架屏

在需要等待加载内容的位置提供一个占位图。

何时使用

网络较慢，需要长时间等待加载处理的情况下。图文信息内容较多的列表/卡片中。

模块详解

col，代表这是一列。布局顺序为左右布局

circle，代表圆形。一般用于头像展示

row，代表这是一行。布局顺序为上下布局

rect，代表这是一个矩形。一般用于普通占位

在设计的时候，采用了树状的数据结构 + Vue递归组件。因此row里面可以嵌套col，col也可以嵌套row。

type

type决定了一个骨架屏的容器类型。可以选择row（行）, col（列），rect（矩形），circle（圆形）四种类型

rowStyle / colStyle

为了区分矩形/圆形主体其外部盒子的样式，设立此规则。主要更改上面示例中 "灰色边框" 的样式。样式为驼峰命名法

style

矩形/圆形主体的样式，同上面示例中 "蓝色/绿色" 的样式。样式为驼峰命名法

rows / cols

如果说上面的type决定了其容器类型，那么rows/cols则是容器的数组。里面的每一个对象都是子模块

基础用法

最简单的占位效果。

使用paragraph属性来定义骨架屏的数据。

<Skeleton :paragraph="paragraph"/>

<script>
    export default {
        data() {
          return {
             paragraph: {
                type: "row",
                rows: [
                   {
                      type: 'rectangle',
                      style: {
                        width: '50%',
                        height: '16px'
                      }
                   },
                   {
                      type: 'rectangle',
                      rowStyle: {
                         marginTop: '24px'
                      },
                      style: {
                         width: '100%',
                         height: '16px'
                      }
                   },
                   {
                      type: 'rectangle',
                      rowStyle: {
                          marginTop: '16px'
                      },
                      style: {
                          width: '50%',
                          height: '16px'
                      }
                   },
                   {
                      type: 'rectangle',
                      rowStyle: {
                         marginTop: '16px'
                      },
                      style: {
                         width: '61%',
                         height: '16px'
                      }
                   }
                ]
             }
          }
        }
    }
</script>

带动画的骨架屏

控制 active 属性决定是否开启动画。

开启动画

使用active属性来定义骨架屏的动画播放。

<Skeleton :paragraph="paragraph" :active="active"/>

<script>
    export default {
        data() {
          return {
            active: true,
            paragraph: {
              type: "col",
              cols: [
                {
                  type: 'row',
                  style: {
                    width: '15%'
                  },
                  rows: [
                     {
                        type: 'rect',
                        style: {
                           width: '150px',
                           height: '110px'
                        }
                     }
                  ]
                },
                {
                  colStyle: {
                     marginLeft: '15px',
                     width: '45%'
                  },
                  type: 'row',
                  rows: [
                     {
                       rowStyle: {
                         marginTop: '4px'
                       },
                       type: 'rect',
                       style: {
                         width: '300px',
                         height: '18px',
                       }
                     },
                     {
                        type: 'col',
                        rowStyle: {
                           marginTop: '12px'
                        },
                        style: {
                           width: '60%'
                        },
                        cols: [
                           {
                              type: 'rect',
                              style: {
                                width: '52px',
                                height: '26px',
                                borderRadius: '3px'
                              }
                           },
                           {
                              type: 'rect',
                              colStyle: {
                                 marginLeft: '12px',
                              },
                              style: {
                                 width: '80px',
                                 height: '26px',
                                 borderRadius: '3px'
                              }
                           },
                           {
                              type: 'rect',
                              colStyle: {
                                 marginLeft: '12px',
                              },
                              style: {
                                width: '52px',
                                height: '26px',
                                borderRadius: '3px'
                              }
                           },
                        ]
                     },
                     {
                        type: 'rect',
                        rowStyle: {
                           marginTop: '33px'
                        },
                        style: {
                           width: '181px',
                           height: '12px',
                        }
                     }
                  ]
                },
                {
                   colStyle: {
                      width: '40%'
                   },
                   type: 'row',
                   style: {
                      width: '40%'
                   },
                   rows: [
                      {
                         type: 'rect',
                         rowStyle: {
                            marginTop: '4px'
                         },
                         style: {
                            width: '141px',
                            height: '18px',
                            margin: '0 auto',
                            marginRight: 0
                         }
                      },
                      {
                         type: 'col',
                         rowStyle: {
                            marginTop: '64px'
                         },
                         style: {
                            width: '100%'
                         },
                         cols: [
                            {
                               colStyle: {
                                 margin: '0 auto',
                                 marginRight: '0'
                               },
                               type: 'circle',
                               style: {
                                 width: '20px',
                                 height: '20px'
                               }
                            },
                            {
                               colStyle: {
                                 margin: '0 auto',
                                 marginLeft: '8px',
                                 marginRight: '0',
                               },
                               type: 'rect',
                               style: {
                                 width: '203px',
                                 height: '16px',
                                 alignSelf: 'center'
                               },
                            }
                         ]
                      }
                   ]
                }
              ]
            }
          }
        }
    }
</script>

参数

参数	说明	类型	可选值	默认值
paragraph	骨架数据	paragraph Object	-	none
active	是否开启动画	boolean	true / false	false

paragraph Object

参数	说明	类型	可选值	默认值
type	父容器类型	string	col / row / rectangle / circle	none
cols / rows	子模块数组	Array	-	false
style	矩形/圆形主体的样式	Object	-	{}
rowStyle / colStyle	矩形/圆形的主体其外部盒子的样式	Object	-	{}

# Skeleton 骨架屏

# 何时使用

# 模块详解

# type

# rowStyle / colStyle

# style

# rows / cols

# 基础用法

# 带动画的骨架屏

# 参数

# paragraph Object