更新记录

0.0.2（2025-12-04）

• chore: 更新依赖

0.0.1（2025-12-04）

✨ 新功能

• 支持多种基础骨架屏类型：avatar（头像）、image（图片）、text（文本）、paragraph（段落）
• 新增网格布局 (grid) 和图片列表布局 (image-list) 两种高级布局模式
• 支持三种动画效果：gradient（渐变）、flashed（闪烁）、none（无动画）
• 实现通过 loading 属性控制骨架屏与实际内容的切换显示
• 支持通过 preset 属性快速配置网格和图片列表的布局样式
• 提供 rowCol 属性实现高度自定义的行列布局和嵌套结构
• 兼容 uniapp 和 uniappx 环境
• 支持 Vue2 和 Vue3 版本

平台兼容性

uni-app(4.85)

uni-app x(4.84)

其他

lime-skeleton 骨架屏

在页面内容加载完成前，显示占位的骨架屏，提升用户体验。支持多种基础类型、网格布局、自定义布局等，兼容uniapp/uniappx。

插件依赖：lime-style、lime-shared。

文档链接

📚 组件详细文档请访问以下站点：

• 骨架屏文档 - 站点1
• 骨架屏文档 - 站点2
• 骨架屏文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-skeleton
2. 导入后可能需要重新编译项目
3. 在页面中使用l-skeleton组件（组件）或lime-skeleton（演示）

代码演示

基础类型

骨架屏支持多种基础类型，包括头像、图片、文本和段落。

<!-- 头像 -->
<l-skeleton type="avatar" loading ></l-skeleton>

<!-- 图片 -->
<l-skeleton type="image" loading animation="flashed"></l-skeleton>

<!-- 文本 -->
<l-skeleton type="text" loading animation="flashed"></l-skeleton>

<!-- 段落 -->
<l-skeleton type="paragraph" loading animation="flashed"></l-skeleton>

网格布局

使用网格布局可以快速创建图文混排的骨架屏。可通过preset控制更详细的配置。

<!-- 基础网格（默认配置） -->
<l-skeleton loading animation="flashed" type="grid"></l-skeleton>

<!-- 图文网格（宫格） -->
<l-skeleton loading animation="none" type="grid" :preset="{
  columns: 3,
  imageWidth: '80px',
  imageHeight: '80px',
  gap: '12px',
  rows: 2,
  alignItems: 'center',
  textWidth: '50px',
  textLineCount: 1
}"></l-skeleton>

<!-- 图文网格（多行配置） -->
<l-skeleton loading animation="gradient" type="grid" :preset="{
  columns: 3,
  imageHeight: '150px',
  imageBorderRadius: '8px',
  textLineCount: 3,
  rows: 2,
  gap: '12px'
}"></l-skeleton>

图片列表布局

图片列表布局适用于创建包含图片和文本的列表骨架屏。可通过preset控制更详细的配置。

<!-- 图片列表（默认配置） -->
<l-skeleton loading animation="flashed" type="image-list"></l-skeleton>

<!-- 图片列表（自定义） -->
<l-skeleton loading animation="flashed" type="image-list" :preset="{ 
  imageBorderRadius: '99px', // 设置为50%实现圆形头像效果
  imageWidth: '64px',
  imageHeight: '64px',
  textHeight: '18px',
  textLineCount: 3,
  gap: '20px',
  rows: 2}">
</l-skeleton>

显示子组件

可以通过loading属性控制骨架屏和实际内容的切换显示。将loading属性设置为false表示内容加载完成，此时会隐藏骨架屏占位图，并显示Skeleton的子组件。

<switch :checked="!isLoading" @change="onSwitchChange"></switch>
<l-skeleton :loading="isLoading" animation="flashed" type="image-list" :preset="{
  imageBorderRadius: '99px',
  imageWidth: '64px',
  imageHeight: '64px',
  textHeight: '18px',
  textLineCount: ['40%', '100%', '100%', '60%'],
  gap: '20px',
  rows: 1}">
  <view class="content-item" style="display: flex; margin-bottom: 20px; flex-direction: row;">
    <image class="content-avatar" src="/static/logo.png"  style="width: 64px; height: 64px; border-radius: 99px; margin-right: 20px;"></image>
    <view class="content-text" style="flex: 1;">
      <text class="content-line" style="width: 40%; height: 20px; margin-bottom: 8px; font-weight: bold; font-size: 18px;" >关于LimeUI</text>
      <text class="content-line" style="width: 100%; margin-bottom: 8px; line-height: 1.8;">
        LimeUI 是一套轻量 Uniappx 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
      </text>
    </view>
  </view>
</l-skeleton>

export default {
  data() {
    return {
      isLoading: true
    }
  },
  methods: {
    onSwitchChange(e: UniSwitchChangeEvent) {
      this.isLoading = !e.detail.value;
    }
  }
}

自定义布局（row-col）

使用row-col属性可以创建高度自定义的骨架屏布局。

<!-- 简单自定义布局 -->
<l-skeleton loading animation="flashed" :row-col="[
  [{ width: '30%', height: '40px' }, { width: '66%', height: '40px' }],
  { width: '80%', height: '16px' },
  { width: '90%', height: '16px' },
  { width: '70%', height: '16px' }]">
</l-skeleton>

<!-- 复杂嵌套布局 -->
<l-skeleton loading animation="gradient" :rows="2" :row-col="[
  [
    { type: 'circle', size: '60px', marginRight: '16px' }, 
    { width: '274px', flexDirection: 'row', flexWrap: 'wrap', marginBottom: '16px',
      children: [
        { width: '80%', height: '20px' },
        { width: '100%', height: '16px' },
        { width: '60%', height: '16px',  marginRight: '40%' },
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: '16px'},
        { width: '74px', height: '74px', marginRight: 'auto'},
      ]
    }
  ]]">
</l-skeleton>

<!-- 带样式的自定义布局 -->
<l-skeleton loading animation="flashed" :row-col="[
  [{ 
    width: '100%', 
    height: '180px',
    borderRadius: '12px',
    type: 'rect'
  }],
  [{ 
    width: '50%', 
    height: '30px',
    borderRadius: '4px',
    type: 'rect'
  }],
  [{ 
    width: '100%', 
    height: '16px',
    borderRadius: '4px',
    type: 'text',
  }],
  [{ 
    width: '60%', 
    height: '16px',
    borderRadius: '4px',
    type: 'text',
  }]
]"></l-skeleton>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-skeleton/components/lime-skeleton -->
<lime-skeleton />

插件标签说明

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Preset配置项

网格布局 (grid)

图片列表布局 (image-list)

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助