okam-zw-skeleton

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	放背景图