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,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //获取图片尺寸数据
  loadPic(e) {
    console.log(1)
    var that = this,
      data = that.data,
      tempPics = data.tempPics,
      index = e.currentTarget.dataset.index
    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()
    })
  },
  //图片加载错误处理
  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)
  },
  }
})