Skeleton 骨架屏

骨架屏组件，用于加载时的占位动画。

基础用法

<div id="demo-skeleton"></div>

<script>
  const skeleton = new SaSkeleton('#demo-skeleton', {
    rows: 3
  });
</script>

加载 SanoUI 组件中...

不同行数

通过 rows 配置骨架屏的行数。

<div id="demo-skeleton-rows"></div>

<script>
  // 3行
  const skeleton1 = new SaSkeleton('#demo-skeleton-rows', {
    rows: 3
  });
  
  // 5行
  const skeleton2 = new SaSkeleton('#demo-skeleton-rows', {
    rows: 5
  });
</script>

加载 SanoUI 组件中...

无动画

通过 animated: false 禁用动画效果。

<div id="demo-skeleton-no-animation"></div>

<script>
  const skeleton = new SaSkeleton('#demo-skeleton-no-animation', {
    rows: 3,
    animated: false
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaSkeletonOptions	{}

配置选项

参数	说明	类型	可选值	默认值
rows	行数	number	-	3
animated	是否显示动画	boolean	-	true

方法

方法名	说明	参数	返回值
destroy	销毁实例	-	void

示例代码

手动创建实例

const skeleton = new SaSkeleton('#my-skeleton', {
  rows: 3,
  animated: true
});

在数据加载中使用

// 显示骨架屏
const skeleton = new SaSkeleton('#content-container', {
  rows: 5
});

// 加载数据
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    // 移除骨架屏
    skeleton.destroy();
    
    // 渲染内容
    renderContent(data);
  });

表格骨架屏

function showTableSkeleton(container) {
  const skeleton = new SaSkeleton(container, {
    rows: 10, // 表格10行
    animated: true
  });
  
  return skeleton;
}

// 使用
const skeleton = showTableSkeleton('#table-container');
// 加载数据后
skeleton.destroy();

实际使用场景

场景 1：列表加载骨架屏

在列表数据加载时显示骨架屏。

<div id="list-skeleton-container" style="min-height: 200px;"></div>
<button class="sa-button sa-button--primary" onclick="loadData()" style="margin-top: 1rem;">加载数据</button>

<script>
  let skeletonInstance = null;
  
  function loadData() {
    const container = document.getElementById('list-skeleton-container');
    
    // 显示骨架屏
    skeletonInstance = new SaSkeleton(container, {
      rows: 5,
      animated: true
    });
    
    // 模拟数据加载
    setTimeout(() => {
      skeletonInstance.destroy();
      skeletonInstance = null;
      
      // 渲染实际内容
      container.innerHTML = `
        <div style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0.5rem;">
          <div style="font-weight: 500;">列表项 1</div>
          <div style="color: #999; font-size: 0.875rem;">这是列表项的描述</div>
        </div>
        <div style="padding: 1rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0.5rem;">
          <div style="font-weight: 500;">列表项 2</div>
          <div style="color: #999; font-size: 0.875rem;">这是列表项的描述</div>
        </div>
      `;
    }, 2000);
  }
</script>

加载 SanoUI 组件中...

场景 2：卡片加载骨架屏

在卡片数据加载时显示骨架屏。

<div id="card-skeleton-container" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"></div>
<button class="sa-button sa-button--primary" onclick="loadCards()" style="margin-top: 1rem;">加载卡片</button>

<script>
  function loadCards() {
    const container = document.getElementById('card-skeleton-container');
    container.innerHTML = '';
    
    // 为每个卡片创建骨架屏
    for (let i = 0; i < 3; i++) {
      const cardContainer = document.createElement('div');
      cardContainer.style.border = '1px solid #ddd';
      cardContainer.style.borderRadius = '4px';
      cardContainer.style.padding = '1rem';
      container.appendChild(cardContainer);
      
      const skeleton = new SaSkeleton(cardContainer, {
        rows: 3,
        animated: true
      });
      
      // 模拟加载
      setTimeout(() => {
        skeleton.destroy();
        cardContainer.innerHTML = `
          <div style="font-weight: 500; margin-bottom: 0.5rem;">卡片标题 ${i + 1}</div>
          <div style="color: #666; margin-bottom: 0.5rem;">卡片内容描述</div>
          <div style="color: #999; font-size: 0.875rem;">卡片底部信息</div>
        `;
      }, 1500 + i * 200);
    }
  }
</script>

加载 SanoUI 组件中...