小程序图片loading组件

wxml

<view class="loading" wx:if="{{display}}">
  <view class="loading-box">
    <view class="loading-1">
      <image class="img" src="/picture/loading-1.png"></image>
    </view>
    <view class="loading-2">
      <image class="img" src="/picture/loading-2.png"></image>
    </view>
    <view class="loading-3">
      <image class="img" src="/picture/loading-3.png"></image>
    </view>
    <view class="loading-5" style="width:{{speed*1.1}}rpx">
      <image class="img" src="/picture/loading-5.png"></image>
    </view>
    <view class="loading-4-box">
      <view class="loading-4" style="left:{{speed}}rpx">
        <image class="img" src="/picture/loading-4.png"></image>
      </view>
    </view>
  </view>
</view>

WXSS

.loading{width:100%;height:100%;background-color: black;position:fixed;top:0;left:0;}
.loading-box{width:700rpx;height:200rpx;position:absolute;top:50%;left:50%;margin-left:-350rpx;margin-top:-100rpx;}
.loading-1{width:128rpx;height:36rpx;position:absolute;left:50%;margin-left:-64rpx;top:30rpx;}
.loading-1 .img{width:128rpx;height:36rpx;}
.loading-2{width:548rpx;height:42rpx;position:absolute;left:50%;margin-left:-274rpx;top:106rpx;}
.loading-2 .img{width:548rpx;height:42rpx;}
.loading-3{width:562rpx;height:54rpx;position:absolute;left:50%;margin-left:-281rpx;top:100rpx;}
.loading-3 .img{width:562rpx;height:54rpx;}
.loading-4-box{width:562rpx;height:54rpx;position:absolute;left:50%;margin-left:-281rpx;top:100rpx;overflow:hidden;}
.loading-4{width:62rpx;height:47rpx;position:absolute;left:2rpx;top:4rpx;transition: all 1s;}
.loading-4 .img{width:62rpx;height:47rpx;}
.loading-5{width:548rpx;height:42rpx;position:absolute;left:50%;margin-left:-274rpx;top:106rpx;overflow:hidden;transition: all 1s;}
.loading-5 .img{width:548rpx;height:42rpx;}

js

Component({
  /**
   * list 需要加载的图片数组
   */
  properties: {
    list: {
      type: Object,
　　　 observer: function(newVal, oldVal){
        this.setData({
          queue: newVal,
          total: newVal.length,
          speed:0,
          finish:0,
          imageIndex:null
        })
        this.load()
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    queue:[],//预加载队列
    imageIndex:null,
    total:0,// 总算
    finish:0,// 完成
    speed:0,// 进度
  },

  methods: {
    /**
     * 执行图片加载
     */
    load:function(){
      let list = this.data.queue
      const url = list.shift();
      if(url){
        console.log(this.data.finish)
        const finish = this.data.finish+1
        const speed = Math.round((finish/this.data.total)*498)
        // 计算
        this.setData({
          imageIndex: url,
          queue:list,
          finish:finish,
          speed:speed,
          display:true,
        })
      }else{
        // 加载完成通知父级并初始化数据
        this.setData({
          queue:[],
          imageIndex:null,
          total:0,
          finish:0,
          speed:0,
          display:false,
        })
      }
    },
    /**
     * 加载成功
     */
    imageload:function(){
      console.log('加载成功'+this.data.finish)
      this.load()
    },
    /**
     * 加载失败
     */
    imageerror:function(){
      console.log('加载失败'+this.data.finish)
      this.load()
    },
  }
})