骨架屏

# 为什么要在页面中使用骨架屏

提前加载页面的骨架屏,可以减少用户的白屏等待时长。百度智能小程序提供了骨架屏机制(小程序框架骨架屏比业务中创建的骨架屏加载时机更靠前,推荐使用小程序提供的框架骨架屏),使用这一机制,可以给用户带来更好的用户体验。下面将介绍如何使用骨架屏这一机制。

未使用骨架屏用户体验 使用骨架屏用户体验

# 骨架屏优化方案示例

  1. 在工程项目根目录新建 skeleton 文件夹( skeleton 为指定命名,不可修改;page 文件夹中的文件名可自定义),目录如下所示:
  skeleton
  |--- page
  |    |--- index.tpl  // 骨架屏模板代码文件
  |    |--- list.tpl  // 骨架屏模板代码文件
  |--- config.json  // page和骨架屏的映射关系文件
  1. 使用标准 HTML 与 CSS,编写骨架屏模板文件。如 index.tpl 骨架屏代码如下图:
    代码示例
<div class="home-holder">
    <div class="home-holder-content">
        <div class="home-holder-content-header">
            <div class="jz-holder-imgContent-img"></div>
            <div class="home-holder-content-header-des jz-holder-imgContent-des c-gap-left-small">
                <div class="home-holder-content-header-des-one jz-holder-des-item"></div>
                <div class="home-holder-content-header-des-two jz-holder-des-item c-gap-top-large"></div>
                <div class="jz-holder-slider"></div>
            </div>
        </div>
        <div class="home-holder-content-body jz-holder-block-content"></div>
    </div>
</div>
<style>
.home-holder {
    padding: 0 17px;
    background-color: #fff;
}
.home-holder-content-header {
     margin-top: 40px;
}
.home-holder-content-header-des-two {
    width: 75%;
}
.home-holder-content-body {
    margin-top: 40px;
    margin-bottom: 40px;
}
.jz-holder-imgContent-img,
.jz-holder-des-item {
    background-color: #F4F2F2;
}
.jz-holder-imgContent-des {
    display: inline-block;
    vertical-align: middle;
    width: 75%;
}
.c-gap-left-small {
    margin-left: 5px;
}
.c-gap-top-large {
    margin-top: .15rem;
}
.jz-holder-block-content {
    width: 100%;
    height: 214px;
}
.jz-holder-slider {
    position: absolute;
    top: 0;
    left: 0%;
    opacity: 0.4;
    width: 104px;
    height: 100%;
    background: -webkit-linear-gradient(left, #F4F2F2, #FFF 50%, #F4F2F2); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,#fff, #FFF 50%, #fff); /* 标准的语法(必须放在最后) */
    animation: slide 1.5s infinite;
    -webkit-animation: slide 1.5s infinite;
}
@-webkit-keyframes slide {
    0% {
        left: -141px;
        top: 0;
    }
    100% {
        left: 100%;
        top: 0;
    }
}
@keyframes slide {
    0% {
        left: -141px;
        top: 0;
    }
    100% {
        left: 100%;
        top: 0;
    }
}
</style>
  1. 配置config.json文件,页面和骨架屏可以是多对一的映射关系,可配置多个页面对应同一个骨架屏模板,也可以为每个页面配置一个骨架屏模板。
    代码示例
{
    "pages/home/index": "skeleton/page/index",
    "pages/list/index": "skeleton/page/index"
}
  1. 在首屏页面渲染完毕后,调用this.removeSkeleton()方法移除骨架屏。在调用removeSkeleton方法的时候,需要有兼容逻辑(this.removeSkeleton && this.removeSkeleton())。
    代码示例
{
   onLoad() {
       // 请求首屏数据,并渲染首屏
       getData().then(() => {
           this.setData({
               pageModule
           }, () => {
               this.removeSkeleton && this.removeSkeleton();
           });
       });
   }
}

Bug&Tip:
1. 开发者工具需要 2.15 及其上版本,基础库需要 3.70.53 及其以上版本;
2. 若无法预览或打开 tpl 文件,请升级开发者工具至 3.3.0 及以上。