微信小程序自带的骨架屏在刷新时,由于轮播图通常是通过<swiper>组件实现的,而<swiper>组件的内容是通过<swiper-item>组件嵌套实现的,所以轮播图的骨架屏需要在每个<swiper-item>中设置。

下面是一个示例代码,演示了如何在轮播图中添加骨架屏效果:

<view class="skeleton">
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{images}}" wx:for-item="image">
      <swiper-item>
        <!-- 轮播图的骨架屏效果 -->
        <view wx:if="{{!loaded}}" class="skeleton-item"></view>
        <!-- 轮播图的真实内容 -->
        <image wx:if="{{loaded}}" class="swiper-image" src="{{image}}" mode="aspectFit"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

在上述代码中,使用了一个变量loaded来标识轮播图中的真实内容是否已加载完毕。在每个<swiper-item>中,通过wx:if判断loaded的值,如果为false,则显示骨架屏元素;如果为true,则显示轮播图的真实内容。

在相应的样式文件中,可以为骨架屏元素设置一个灰色的背景色,以区分于真实内容。示例代码如下:

.skeleton {
  width: 100%;
  height: 200rpx;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
}

.skeleton-item {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

在真实的逻辑代码中,可以在数据请求完成后将loaded的值设置为true,这样轮播图的骨架屏就会被真实内容替换掉。

需要注意的是,上述代码仅是示例,具体的实现方式可能因项目需求而有所不同。可以根据实际情况进行适当的调整

微信小程序自带的骨架屏刷新为什么轮播图没有骨架屏可以举例代码?

原文地址: https://www.cveoy.top/t/topic/ijxW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录