okam-zw-skeleton v0.0.1-alpha.0

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

参数

插槽