Ralltiir Skeleton

What's ralltiir-skeleton

骨架屏（skeleton）的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。

ralltiir-skeleton主要向整页或基于ralltiir实现的页面提供渲染骨架屏的机制，ralltiir-skeleton包含skeleton基类及skeleton内部实现的接口appearance。

• skeleton

  • 实现生命周期，提供钩子方法
  • 提供各种可选参数，以满足skeleton实现各种效果，如渐显隐、容器fixed（以实现动画）、内部元素偏移（以实现居中）
  • 调用实现appearance接口的组件渲染/销毁内部样貌

• appearance

  • 在skeleton容器内实现渲染的接口，其会接口方法被skeleton在生命周期合适的时机调用

• API

Usage

var appearance = new LoadingAppearance({toplight: true});

var skeleton = new Skeleton.Skeleton(container, appearance, {
  background: "#FFF"
  ,fadeOut: true
  ,fadeOutDuration: 400
  ,isOffset: true
  ,isFixed: true
});

skeleton.create();
skeleton.destroy();

Appearance Component

目前已经提供2类Appearance组件：

• ralltiir-skeleton-loading
  • 主要实现居中效果的loading态
  • Demo
• ralltiir-skeleton-tombstone
  • 主要实现骨架屏效果
  • Demo

在ralltiir页面中使用ralltiir-skeleton

• 方式一：在ralltiir view的生命周期方法里直接创建/销毁ralltiir-skeleton
• 方式二：（开发中）通过注册方式提前声明ralltiir service对应的ralltiir-skeleton效果