微信小程序 页面一加载先显示骨架屏，接口请求完成再显示数据

业务需求：

原因：微信小程序，页面一进来，数据还没加载，然后展示的页面有点奇怪

因此：做一个自定义的骨架屏过渡一些，等接口请求完成再把数据渲染出来。

一，自定义骨架屏组件skeleton

wxml:

<view class="skeleton-block block-index">
  <view class="slideshow"></view>
  <view class="slideshow"></view>
  <view class="tab-view">
    <view wx:for="{{10}}"></view>
  </view>
  <view class="tab-section"></view>
  <view class="conten-view">
    <view wx:for="{{100}}"></view>
  </view>
</view>

wxss:

.skeleton-block{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  z-index: 202;
  overflow: hidden;
  padding-top: 20rpx;
}

.block-index{
  padding: 0 20rpx;
}
.slideshow{
  width: 100%;
  height: 300rpx;
  background-color: #f7f7f9;
  border-radius: 20rpx;
  margin-top: 30rpx;
}
.tab-view{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tab-view view {
  width: 110rpx;
  height: 40rpx;
  background-color: #f7f7f9;
  margin-top: 30rpx;
  margin-right: 15rpx;
  border-radius: 10rpx;
}
.tab-section{
  width: 100%;
  height: 80rpx;
  border-radius: 15rpx;
  background-color: #f7f7f9;
  margin-top: 30rpx;
}
.conten-view{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 
}
.conten-view view{
  width: 30%;
  height: 250rpx;
  background-color: #f7f7f9;
  border-radius: 20rpx;
  margin-top: 30rpx;

}

父组件：

json中引入自定义骨架屏skeleton

"skeleton": "../../components/skeleton/skeleton",

wxml:

<skeleton wx:if="{{showskeleton}}"/>

js:

data:{
    showskeleton:ture ,//默认为ture,一进来就先展示骨架屏
}

onLoad: function (options){
    //调用接口getList
    getList().then(res=>{
        //接口请求完成就设置为false
        this.setdata({
            showskeleton:false
        })
    
    }).finally(()=>{
      this.setData({
        showskeleton:false
      })
    })

}

以上就是一个骨架屏的html+css,还有引用时的使用，如果能帮助得了大家就点个赞呗