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