Skeleton 组件

概述

小程序骨架屏

使用指南

• 引入：在 Okam 文件中引入 声明组件

// 只使用背景图，仅引入Skeleton即可 -- 推荐
import Skeleton from 'okam-skeleton/Skeleton';
// 如需Placeholder 才引入Placeholder
import Placeholder from 'okam-skeleton/Placeholder';

export default {
    components: {
        Skeleton,
        // 需要才引入
        Placeholder
    }
};

• 使用：在 Okam 文件中使用组件

例1. 背景图模式：

js:

<skeleton :loading="sknLoading" fade overflow>
    <div class="placeholder" slot="placeholder" />
    。。。页面内容，即，首屏内容被skeleton组件包含
</skeleton>

css:

// 背景图样式需全屏
.placeholder
    background-image url(./img/dishonest-skn.svg)
    background-size 100% auto
    background-position 0 -3px // ios加载svg背景可能有1像素偏差
    height 100vh

例2. Placeholder模式：

<skeleton :loading="listLoading" fade :active="showActive">
    <div slot="placeholder" >
        <placeholder
            title
            title-width="30%"
            avatar
            size="small"
            shape="circle"
            align="center"
            :rows="1"
            rows-width="100%"
            split
        ></placeholder>
    </div>
</skeleton>

Placeholder模式预览

API

参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---|---|---|---|---| | loading | 是否显示骨架 | Boolean | - | true | | fade | 骨架屏切换实体fade效果 | Boolean | - | false | | overflow | 只展示1屏 | Boolean | - | false | | height | 骨架屏大小, 默认全屏 | String | - | '100vh' | | active | 动画效果 *背景图模式无效 | Boolean | - | false |

插槽

| 名称 | 说明 | |-|-| | placeholder | 放背景图 |