因为较小的图片会先加载出来,破坏了fileList的顺序,所以需要按顺序加载。代码使用了vant-weapp组件(Vant Weapp - 轻量、可靠的小程序 UI 组件库)

wxml

<view wx:for="{{fileList}}" wx:key="index" data-item='{{item}}' data-index="{{ index }}">
     <van-image use-loading-slot width="100%" height="120px" src="{{item.url}}" bindload="imageLoad" >
          <van-loading slot="loading" type="spinner" size="20" vertical />
     </van-image>
</view>

js

Page({
  data: {
    // 当前加载的图片索引
    currentIndex: 0, 
    // 文件
    fileList: [{
      url:'XXX'
    },
    {
      url:'XXX'
    }],
  },
  onLoad(options) {
    this.getFiles();
  },
  getFiles() {
    this.setData({
      fileList: this.data.fileList[0]
    });
  },
  /**
   * 图片加载完成
   */
  imageLoad() {
    const nextIndex = this.data.currentIndex + 1;
    this.setData({
      currentIndex: nextIndex
    })
    // 如果还有下一张图片,继续加载
    if (nextIndex < this.data.fileList.length) {
      this.setData({
        fileList: this.data.fileList[nextIndex]
      });
    } else {
      console.log("所有图片加载完成!");
    }
  }
})

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐