rice-ui

暗黑模式

Skeleton 骨架屏 1.2 ​

手机扫码预览
21:26
组件名：rice-skeleton、rice-skeleton-item

在需要等待加载内容的位置设置一个骨架屏，给用户更好的体验。

平台兼容性 ​

uni-app x ​

AndroidAndroid(Vapor)iOSiOS(Vapor)HarmonyOSHarmonyOS(Vapor)微信小程序h5
√√√√√√√√

基础用法 ​

  • 通过 rows 配置骨架屏段落数量；
  • show-title 为true时，显示的数量会多1行， 首行会被渲染一个长度 33% 的段首，可以通过css变量（--rice-skeleton-title-width）自定义首行的宽度
html
<rice-skeleton :rows="2" show-title />
<!-- 通过css变量自定义首行show-title的宽度 -->
<rice-skeleton  show-title style="--rice-skeleton-title-width:50%"/>

动画效果 ​

可选：- gradient（渐变，Android、iOS的非蒸汽模式不支持）/ flashed（闪烁渐隐渐现）/ none（无动画）

html
<!-- #ifdef VUE3-VAPOR || MP || WEB || APP-HARMONY -->
<rice-skeleton animate="gradient" show-title :rows="2" />
<!-- #endif -->

自定义配置 ​

通过 skeleton 插槽可以自定义配置大多数的结构

单元格骨架屏

vue
<template>
  <rice-skeleton animate="gradient" v-for="item in 2" :key="item" style="margin-bottom:22px">
    <template #skeleton>
      <view class="skeleton-cell">
        <rice-skeleton-item type="circle" />
        <view class="skeleton-cell-item">
          <rice-skeleton-item type="p" style="width: 50%;margin-bottom: 12px;" />
          <rice-skeleton-item type="p" />
        </view>
      </view>
    </template>
  </rice-skeleton>
</template>

<style scoped lang="scss">
.skeleton-cell {
  flex-direction: row;
  align-items: center;
  &-item {
    flex: 1;
    margin-left: 12px;
  }
}
</style>

宫格骨架屏

vue
<template>
  <rice-skeleton animate="none">
    <template #skeleton>
      <view class="skeleton-grid">
        <view v-for="item in 5" :key="item">
          <rice-skeleton-item type="rect" class="skeleton-grid-rect" />
          <rice-skeleton-item type="p" />
        </view>
      </view>
    </template>
  </rice-skeleton>
</template>

<style scoped lang="scss">
.skeleton-grid {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  &-rect{
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
  }
}
</style>

图文骨架屏

vue
<template>
  <rice-skeleton>
    <template #skeleton>
      <view class="skeleton-pic">
        <view class="skeleton-pic-item" v-for="item in 2" :key="item">
          <rice-skeleton-item type="image" image-icon-size="32px" style="width: 100%;height: 160px;" />
          <rice-skeleton-item type="p" style="margin: 12px 0 8px;" />
          <rice-skeleton-item type="p" style="width: 70%;" />
        </view>
      </view>
    </template>
  </rice-skeleton>
</template>

<style scoped lang="scss">
.skeleton-pic {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  &-item {
    width: 48%;
  }
}
</style>

显示子组件 ​

当 loading 结束之后，可以通过 loading 属性的值来控制是否显示加载后的 DOM。

  • 可以通过具名插槽 default 来构建 loading 结束之后需要展示的真实 DOM 结构；
  • 也可以通过 v-if 隐藏 骨架屏组件；
vue
<template>
  <rice-skeleton :loading="!isLoaded" animate="flashed">
    <template #skeleton>
      <view class="skeleton-cell2">
        <rice-skeleton-item type="image" class="logo-skeleton" />
        <view class="skeleton-cell2-item">
          <rice-skeleton-item type="p" style="width: 40%" />
          <rice-skeleton-item type="p" style="margin-top: 8px;" />
          <rice-skeleton-item type="p" style="margin: 8px 0;" />
          <rice-skeleton-item type="p" style="width: 80%;" />
        </view>
      </view>
    </template>
    <!-- 真实 DOM 结构 -->
    <template #default>
      <view class="skeleton-cell2">
        <image src="/static/images/logo.png" class="logo"></image>
        <view class="skeleton-cell2-item">
          <text class="title">RiceUI</text>
          <text class="desc">基于 uniapp x 开发的多平台UI框架，同时兼容Android、iOS、HarmonyOS、微信小程序、h5；兼容APP端的蒸汽模式。
          </text>
        </view>
      </view>
    </template>
  </rice-skeleton>
</template>

<script setup>
const isLoaded=ref(false)
</script>

<style scoped lang="scss">
.skeleton-cell2 {
  flex-direction: row;
  &-item {
    flex: 1;
    margin-left: 12px;
  }
}
.logo-skeleton {
  border-radius: 99px;
  width: 55px;
  height: 55px;
}
.logo {
  width: 35px;
  height: 35px;
}
</style>

API ​

Skeleton Props ​

属性名类型说明默认值
rowsNumber配置骨架屏段落数量3
animateString动画效果，可选：gradient（渐变，Android、iOS的非蒸汽模式不支持）/ flashed（闪烁）/ none（无动画）flashed
showTitleBoolean是否显示首行，首行会被渲染一个长度 33% 的段首，自定义skeleton插槽时无效false
loadingBoolean是否处于加载中true

SkeletonItem Props ​

属性名类型说明默认值
typeString可选：p/circle/rect/imagep
imageIconSizeString/Numbertype 为 image 时，图标的大小26px

Slots ​

名称说明参数
skeleton渲染 skeleton 模板的内容-
default真正渲染的DOM-

类型定义 ​

组件导出如下类型

ts
// 组件类型
const skeletonRef=ref<RiceSkeletonComponentPublicInstance|null>(null)
const skeletonItemRef=ref<RiceSkeletonItemComponentPublicInstance|null>(null)