微信小程序渐进式骨架屏的写法

前置

代码片段
- @点我快速跳转
- 手动复制跳转:https://developers.weixin.qq.com/s/WOktHDm77mGj

知道hidden属性

为true显示,为false隐藏,类似于display:none

<view>
  <text hidden="{{true}}">我会被隐藏</text>
  <text hidden="{{false}}">我会被显示</text>
</view>

第一步:写好基本的html

写好的静态页面
- 分为三个部分,上,中,下

代码

wxml

<view style="display: flex;flex-direction: column;height: 100vh;">
  <!-- 前置了解下hidden -->
  <!-- <text hidden="{{true}}">我会被隐藏</text>
  <text hidden="{{false}}">我会被显示</text> -->

  <!-- 轮播图部分 -->
  <view class="swiper-part">
    <swiper indicatorDots="{{true}}">
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>  
  </swiper>
  </view>

  <!-- 文字说明部分 -->
  <view class="text-part">
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
  </view>

  <!-- 底部部分 -->
  <view class="bottom-part">
    <image style="width: 100%;" src="https://dreamlove.top/img/favicon.png"/>
  </view>
</view>

wxss

.swiper-part{

}

.text-part{
  /* 简单的设置下文字居中显示 */
  flex: 1;
  text-align: center;
  display: flex;
  flex-flow: column nowrap;
  align-self: center;
  justify-content: center;
}

.bottom-part{
  
}

第二步:使用data-skeleton-hide指明骨架区域

由于我们分为了三个部分"swiper-part"和"text-part"和bottom-part,我们这里就指明三个部分就可以

<!-- 轮播图部分 -->
<view class="swiper-part" data-skeleton-hide="swiperData"> ... </view>
 
<!-- 文字说明部分 -->
<view class="text-part" data-skeleton-hide="textData"> ... </view>

<!-- 底部部分 -->
<view class="bottom-part" data-skeleton-hide="bottomData"> ... </view>

代码(wxss未变动,所以不列出)
- wxml

<view style="display: flex;flex-direction: column;height: 100vh;">
  <!-- 前置了解下hidden -->
  <!-- <text hidden="{{true}}">我会被隐藏</text>
  <text hidden="{{false}}">我会被显示</text> -->

  <!-- 轮播图部分 -->
  <view class="swiper-part" data-skeleton-hide="swiperData">
    <swiper indicatorDots="{{true}}">
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper1.png"/></swiper-item>  
    <swiper-item><image style="width: 100%;" src="https://tdesign.gtimg.com/miniprogram/images/swiper2.png"/></swiper-item>  
  </swiper>
  </view>

  <!-- 文字说明部分 -->
  <view class="text-part" data-skeleton-hide="textData">
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
    <view>大家好,我是梦洁和秋叶</view>
  </view>

  <!-- 底部部分 -->
  <view class="bottom-part" data-skeleton-hide="bottomData">
    <image style="width: 100%;" src="https://dreamlove.top/img/favicon.png"/>
  </view>
</view>

这样子我们生成的骨架屏就有了区域,我们在data-skeleton-hide传入的是字符串,不是变量
生成骨架屏代码长这个样子
- 所以我们传入的变量是控制骨架屏显示和隐藏的(注意不要弄混了)

<!-- 原 wxml 内容 -->
<view data-skeleton-hide="hideBlock1"></view>
<view data-skeleton-hide="hideBlock2"></view>

<!-- 骨架屏 wxml 内容 -->
<view hidden="{{hideBlock1}}"></view>
<view hidden="{{hideBlock2}}"></view>

第三步:生成骨架屏并创建各个部分显示/隐藏的变量

生成骨架屏

确认

生成后会默认展示下效果,这里就不纠结怎么样了

创建各个部分显示/隐藏的变量和一个总体loading变量

代码

// pages/skeletonDemo/skeletonDemo.js
Page({
  data: {
   swiperData:false,//顶部轮播图数据是否加载完成-默认false
    textData:false,//中间文本数据是否加载完成-默认false
    bottomData:false,//底部数据是否加载完成-默认false
    loading:true,//数据是否还有没有加载的-默认true
  },
})

第四步:使用骨架屏

引入骨架屏并在template当中使用data属性传入控制显示/隐藏的变量和总体loading变量

<!-- 引入骨架屏 -->
<import src="./skeletonDemo.skeleton" />
<!-- 传入创建好的控制骨架屏的变量名和总体loading -->
<template is="skeleton" wx:if="{{loading}}" data="{{swiperData,textData,bottomData}}"/>


//...下面是wxml内容部分,就隐藏不显示了

引入样式

添加@import "./skeletonDemo.skeleton.wxss";即可引入

@import "./skeletonDemo.skeleton.wxss";
.swiper-part{

}

.text-part{
  /* 简单的设置下文字居中显示 */
  flex: 1;
  text-align: center;
  display: flex;
  flex-flow: column nowrap;
  align-self: center;
  justify-content: center;
}

.bottom-part{
  
}

第五步:添加控制显示/隐藏的变量到页面内容

因为我们是默认显示骨架屏的,所以如果想要展示原本的内容,就取反就可以

<!-- 轮播图部分 -->
<view class="swiper-part" data-skeleton-hide="swiperData"  hidden="{{!swiperData}}"> ... </view>
 
<!-- 文字说明部分 -->
<view class="text-part" data-skeleton-hide="textData" hidden="{{!textData}}"> ... </view>

<!-- 底部部分 -->
<view class="bottom-part" data-skeleton-hide="bottomData" hidden="{{!bottomData}}"> ... </view>

最后和演示效果

其实已经完成了这样子,我们最后自己添加下延迟吧
js文件

// pages/skeletonDemo/skeletonDemo.js
Page({
  data: {
    swiperData:false,//顶部轮播图数据是否加载完成-默认false
    textData:false,//中间文本数据是否加载完成-默认false
    bottomData:false,//底部数据是否加载完成-默认false
    loading:true,//数据是否还有没有加载的-默认true
  },
  onLoad(){
    setTimeout(() => {
      this.setData({
        swiperData:true,//顶部轮播图设置加载完成
      })
    },1000);

    setTimeout(() => {
      this.setData({
        textData:true,//中间文本设置加载完成
      })
    },3000);

    setTimeout(() => {
      this.setData({
        bottomData:true,//底部图片设置加载完成
        loading:false,//数据全部加载完成,这样子骨架屏就可以隐藏了
      })
    },6000);

  }
})

这样子就实现了渐进加载骨架屏效果

注意

更改骨架屏配置后需要重新生成骨架屏
如果需要闪亮的效果,可以全局添加下方配置

"skeletonConfig": {
  "global": {
    "loading": "shine"
  }
}

前置

知道hidden属性

第一步:写好基本的html

第二步:使用data-skeleton-hide指明骨架区域

第三步:生成骨架屏并创建各个部分显示/隐藏的变量

生成骨架屏

创建各个部分显示/隐藏的变量和一个总体loading变量

第四步:使用骨架屏

引入骨架屏并在template当中使用data属性传入控制显示/隐藏的变量和总体loading变量

引入样式

第五步:添加控制显示/隐藏的变量到页面内容

最后和演示效果

注意

参考资料