微信小程序:按顺序一张图片加载完后，再加载另一张

h_65432102026-01-31 8:42

因为较小的图片会先加载出来，破坏了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>

复制代码

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("所有图片加载完成！");
    }
  }
})