小程序van-skeleton 骨架屏

最新推荐文章于 2025-03-12 18:16:46 发布

水果贝塔

最新推荐文章于 2025-03-12 18:16:46 发布

阅读量2.7k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_41559579/article/details/111593179

版权

小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在小程序中使用van-Skeleton实现优雅的加载骨架屏效果。通过JSON配置及JS逻辑控制显示加载状态，利用van-loading组件展示加载中提示，并在数据加载完成后关闭加载提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

json 部分引入

在这里插入图片描述

html 部分；

<view class="container">
<view style="width:100rpx;height:100%;margin:0 auto;margin-top:516rpx;text-align: center;" wx:if="{{Isloading}}">
  <van-loading style="margin:0 auto;text-align:center;" wx:if="{{Isloading}}" type="spinner" color="#1989fa" />
</view>
  <van-skeleton loading="{{ loading }}">
  <!-- <van-loading wx:if="{{Isloading}}" type="spinner" color="#1989fa" /> -->
  <view class="page-section page-section-spacing swiper" style="margin-top:{{widthScreen}}">
    <swiper class="swiper-banner" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <image mode="aspectFit" class="swiper-item swiper-banner-item" src="{{tools.imgUrl(item)}}" data-index="{{index}}" bindtap="openGallery" style="width: 100%; height: 100%;"></image>
        </swiper-item>
      </block>
    </swiper>
    </view>
    <van-skeleton/>
  </view>

js 部分

  data: {
    Isloading:true,
    loading: true,
    }
    onLoad:function(){
     setTimeout(()=>{
      this.setData({
        loading:false
      })
    },1000)
}
//获取数据列的接口；
等列表数据从后台接口返回成功后，将loading 组件设为false;
 that.setData({
        Isloading:false
      })
因为偷懒就没有写关于骨架屏的loading 样式，直接加入van-loading,如果页面众多，不建议使用，因为css工作量有点大。
可以参考官网；
<template>
      <div class="skeleton" v-show="skeletonShow">
        <van-skeleton title avatar row="3" />
        <van-skeleton :row="3" row-width="160" />
        <van-skeleton :row="3" row-width="160" />
      </div>   
</template>

<style scoped lang="scss">
.skeleton {
  .van-skeleton {
    display: inline-block;
    width: 50px;
    margin: 0px 22px;
    .van-skeleton__content {
      width: 50px;
    }
    .van-skeleton__row {
      height: 50px;
      margin: 17px 0px;
    }
  }
}
</style>

在这里插入图片描述