EXEED_wxapp/components/picshow/picshow.js

// components/picshow/picshow.js
import {
  lookup
} from '../../utils/util'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tempPics: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    columnsHeight: [0, 0],
    isLoading: true,
    columns: [
      [],
      []
    ],
    cdn: getApp().globalData.cdn,
    count: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //获取图片尺寸数据
    loadPic(e) {
      var that = this,
        data = that.data,
        tempPics = data.tempPics,
        count = data.count,
        length = parseInt(data.tempPics.length)
      // if (tempPics[index]) {
      //   //以750为宽度算出相对应的高度
      //   tempPics[index].height = e.detail.height * 750 / e.detail.width
      //   tempPics[index].isLoad = true
      // }
      // that.setData({
      //   tempPics: tempPics
      // }, function () {
      //   that.finLoadPic()
      // })
      // for (let count = 0; count < tempPics.length; count++) {
      console.log(count, length)
      if (count === length) {
        console.log('完成')
      } else {
        if (tempPics[count].type === 1) {
          console.log(that.data.cdn + tempPics[count].coverUrl)
          wx.getImageInfo({
            src: that.data.cdn + tempPics[count].coverUrl,
            success(res) {
              console.log('videosuccess', res)
            },
            fail(res) {
              console.log('videofail', res)
            },
            complete() {
              count++
              that.setData({
                count: count
              })
              that.loadPic()
            }
          })
        } else {
          let src = that.data.cdn + tempPics[count].fileUrl
          console.log(src)
          wx.getImageInfo({
            src: src,
            success(res) {
              console.log('imagesuccess', res)
            },
            fail(res) {
              console.log('imagefail', res)
            },
            complete() {
              count++
              that.setData({
                count: count
              })
              that.loadPic()
            }
          })
        }
      }
      // }
    },
    //图片加载错误处理
    loadPicError: function (e) {
      var that = this,
        data = that.data,
        tempPics = data.tempPics,
        index = e.currentTarget.dataset.index
      if (tempPics[index]) {
        //图片加载错误时高度固定750，展示为正方形
        tempPics[index].height = 750
        tempPics[index].isLoad = true
      }
      that.setData({
        tempPics: tempPics
      }, function () {
        that.finLoadPic()
      })
    },
    //判断图片是否加载完成
    finLoadPic: function () {
      var that = this,
        data = that.data,
        tempPics = data.tempPics,
        length = tempPics.length,
        fin = true
      for (var i = 0; i < length; i++) {
        if (!tempPics[i].isLoad) {
          fin = false
          break
        }
      }
      if (fin) {
        // wx.hideLoading()
        if (that.data.isLoading) {
          that.data.isLoading = false
          that.renderPage()
        }
      }
    },
    //渲染到瀑布流
    renderPage: function () {
      var that = this,
        data = that.data,
        columns = data.columns,
        tempPics = data.tempPics,
        length = tempPics.length,
        columnsHeight = that.data.columnsHeight,
        index = 0
      for (var i = 0; i < length; i++) {
        index = columnsHeight[1] < columnsHeight[0] ? 1 : 0
        columns[index].push(tempPics[i])
        columnsHeight[index] += tempPics[i].height
      }
      that.setData({
        columns: columns,
        tempPics: []
      })
      that.data.columnsHeight = columnsHeight
    },
    //加载数据
    loadData: function () {
      var that = this
      if (!that.data.isLoading) {
        wx.showLoading()
        this.setData({
          isLoading: true
        })
        console.log(this.data.tempPics)
      }
    },
    //跳转详情
    to(e) {
      lookup(e.currentTarget.dataset.item)
    },
  }
})