# 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（可选）类名设置圆形骨架选择器

警告

必须页面有节点才能显示骨架屏，所以动态渲染的数据， data 中可以做一些假数据
如果骨架屏显示移位，请参考 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" />

# 骨架背景颜色

node-background 设置骨架背景颜色

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

# 完整案例

<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'

← List 列表 Swiper 轮播 →