LimeUI+1.2.4

主题

LimeSkeleton 骨架屏 ​

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

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

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础类型 ​

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

html
<!-- 头像 -->
<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控制更详细的配置。

html
<!-- 基础网格（默认配置） -->
<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控制更详细的配置。

html
<!-- 图片列表（默认配置） -->
<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的子组件。

html
<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>
javascript
export default {
  data() {
    return {
      isLoading: true
    }
  },
  methods: {
    onSwitchChange(e: UniSwitchChangeEvent) {
      this.isLoading = !e.detail.value;
    }
  }
}

自定义布局（row-col） ​

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

html
<!-- 简单自定义布局 -->
<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>

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-skeleton组件标签
lime-skeleton演示标签

Vue2使用说明 ​

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

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

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

API文档 ​

Props ​

参数说明类型默认值
loading是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容booleantrue
animation动画效果，可选值为 gradient（渐变加载动画）、flashed（闪烁加载动画）、none（无动画）。在 uniappx app 环境下仅支持 flashedstringnone
delay延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒number0
type骨架图风格，可选值为 avatar（头像）、image（图片）、text（文本）、paragraph（段落）、grid（网格）、image-list（图片列表）stringtext
rowCol高级设置，用于自定义行列数量、宽度高度、间距等。支持多种配置方式：
1. [1, 1, 2] - 表示输出三行骨架图，第一行一列，第二行一列，第三行两列
2. [1, 1, { width: '100px' }] - 表示自定义第三行的宽度为 100px
3. [1, 2, [{ width, height }, { width, height, marginLeft }]] - 表示第三行有两列，且自定义宽度、高度、尺寸、间距等
4. 支持在 col 配置项中通过 children 属性实现嵌套布局，如：[1, 2, [{ width, height }, { width, height, children: [{ width: '80%' }, { width: '100%' }] }]]		array-
preset预设布局配置，支持多种内置布局样式，只针对 grid 和 image-list 类型生效object-
rows重复rowCol结构的次数，用于快速创建多个相同的骨架图行number-

Preset配置项 ​

网格布局 (grid) ​

参数说明类型默认值
columns列数number2
rows行数number1
imageWidth图片宽度stringnull
imageHeight图片高度string90px
imageBorderRadius图片圆角string12px
textWidth文本宽度string100%
textLineCount文本行数或每行宽度数组number | string[]1
gap网格间距string16px

图片列表布局 (image-list) ​

参数说明类型默认值
imageWidth图片宽度string100px
imageHeight图片高度string120px
imageBorderRadius图片圆角string8px
textHeight文本高度string16px
textLineCount文本行数或每行宽度数组number | string[]4
gap列表项间距string16px
rows列表行数number1

主题定制 ​

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

名称默认值描述
--l-skeleton-text-height16px文本骨架高度
--l-skeleton-text-border-radius4px文本骨架圆角
--l-skeleton-bg-color#f2f3f5骨架背景颜色
--l-skeleton-rect-border-radius4px矩形骨架圆角
--l-skeleton-gradient-animation-duration1.5s渐变动画时长
--l-skeleton-flashed-animation-duration1.2s闪烁动画时长

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码