微信小程序骨架屏实现：轮播图示例

<template>
  <view class="carousel">
    <swiper
      :circular="true"
      :autoplay="false"
      :interval="3000"
      @change="onChange"
    >
      <swiper-item v-for="item in bannerList" :key="item.id">
        <navigator :url="item.hrefUrl" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in bannerList.length"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>
<template>
  <view class="skeleton-carousel">
    <view class="skeleton-swiper"></view>
    <!-- 指示点 -->
    <view class="skeleton-indicator">
      <view class="skeleton-dot"></view>
      <view class="skeleton-dot"></view>
      <view class="skeleton-dot"></view>
      <view class="skeleton-dot"></view>
    </view>
  </view>
</template>
<style>
  .skeleton-carousel {
    width: 100%;
    height: 200px;
    background-color: #f2f2f2;
    position: relative;
  }

  .skeleton-swiper {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
  }

  .skeleton-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .skeleton-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #c6c6c6;
    margin: 0 5px;
  }
</style>