# Skeleton 骨架屏

该组件用于在内容加载过程中预显示页面结构,增强用户体验

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 基本用法

使用方法

步骤1: pi-skeleton 类名设置骨架屏组件的最外层元素(容器),一般会设置在 pi-scroll

步骤2: 在页面添加pi-skeleton组件,并设置相应的属性

<template>
<view class="pi-scroll-container">
  <pi-navbar title="骨架屏" />
  <scroll-view class="pi-scroll pi-skeleton" scroll-y>
  ...
  </scroll-view>
  <pi-skeleton v-model="loading"/>
</view>
</template>
1
2
3
4
5
6
7
8
9

步骤3: 在pi-skeleton容器中,按需设置以下样式

pi-skeleton-rect(可选) 类名设置矩形骨架选择器

pi-skeleton-round(可选) 类名设置圆角骨架选择器

pi-skeleton-circle(可选) 类名设置圆形骨架选择器

警告

  1. 必须页面有节点才能显示骨架屏,所以动态渲染的数据, data 中可以做一些假数据
  2. 如果骨架屏显示移位,请参考 pi-skeleton 样式是否设置正确

# 显示骨架屏

通过value/v-model属性设置是否显示骨架屏

<template>
  <pi-navbar title="骨架屏" />
  <view class="pi-content pi-skeleton">
    <!-- 骨架屏组件内容 -->
  </view>
  <pi-skeleton v-model="loading"/>
</template>
1
2
3
4
5
6
7
export default {
  data() {
    return {
      loading: true
    }
  }
}
1
2
3
4
5
6
7

# 容器背景颜色

background 设置容器背景颜色

<pi-skeleton :show="true"  background="#ffffff" />
1

# 骨架背景颜色

node-background 设置骨架背景颜色

<pi-skeleton :show="true"  node-background="#f5f5f5" />
1

# 完整案例

<template>
  <view class="pi-scroll-container">
    <pi-navbar title="骨架屏" />
    <scroll-view class="pi-scroll pi-skeleton" scroll-y>
      <view class="pi-content">
        <view class="userinfo">
          <pi-img
            class="pi-skeleton-round pi-mg-bottom-32"
            width="100%"
            mode="widthFix"
            :src="userInfo.avatarUrl"
          />
        </view>
        <view class="pi-mg-top-32">
          <view v-for="(item, index) in lists" :key="index" class="pi-skeleton-rect lists">
            <view class=" pi-mg-bottom-12">{{ item }}</view>
          </view>
        </view>
      </view>
      <pi-skeleton v-model="loading" />
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Skeleton',
  data() {
    return {
      userInfo: {
        avatarUrl: 'http://huozi.sadais.com/img/banner_bg.png'
      },
      lists: [
        '自主技术融合阿里云智慧云服务。',
        '三点一四在大数据和人工智能技术上的优势,结合阿里云强大的技术基础生态,为企业提供领先的技术方案',
        '深入理解中小企业数字化难题',
        '数十个成功案例的高效实践,为企业实现客户、渠道、销售和员工的全面在线化,发掘商业新机遇'
      ],
      loading: false // 是否显示骨架屏组件
    }
  },
  mounted() {
    // 模拟数据加载
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# Props

名称 描述 类型 必选 默认值
customStyle 自定义样式,对象形式(默认值:{}) Object false -
customClass 自定义样式类,字符串形式('') String false -
value/v-model 是否显示骨架屏 Boolean false false
animation 是否显示加载动画 Boolean false true
containerSkeletonSelector 骨架容器选择器 String false '.pi-skeleton'
rectSkeletonSelector 矩形骨架选择器 String false '.pi-skeleton-rect'
circleSkeletonSelector 圆形骨架选择器 String false '.pi-skeleton-circle'
roundSkeletonSelector 圆角骨架选择器 String false '.pi-skeleton-round'
borderRadius round 圆角骨架的圆角大小 String | Number false 12
background 背景颜色 String false '#ffffff'
nodeBackground 骨架背景颜色 String false '#f5f5f5'
Last updated: 2021/9/10 下午5:26:03
10:44