在进行瀑布流布局的时候，需要根据图片的高度进行瀑布流布局，另外一个需求是根据浏览量进行从左到右显示，服务器发送的是根据流量排好序的数据，但是我用bindload方法监听图片的加载情况，但是它不是按照服务器给的数据进行加载的导致，瀑布流的浏览量发生错乱，请问有没有好的方法按序加载
<view style="display:none"> <block wx:for="{{newAddEssays}}" wx:key='d'> <!--商铺文章--> <block wx:if='{{item.shopessayhead}}'> <block wx:if='{{item.shopessaycustom === 1 && item.shopessaycustomhead !==""}}'> <image wx:key="id" id="{{item.shopeid}}-{{index}}" src="{{imgHost}}{{item.shopessaycustomhead}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> <block wx:else> <image wx:key="id" id="{{item.shopeid}}-{{index}}" src="{{imgHost}}{{item.shopessayhead[0]}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> </block> <!--商品--> <block wx:if='{{item.head}}'> <block wx:if='{{item.custom === 1 && item.customhead !==""}}'> <image wx:key="id" id="{{item.pid}}-{{index}}" src="{{imgHost}}{{item.customhead}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> <block wx:else> <image wx:key="id" id="{{item.pid}}-{{index}}" src="{{imgHost}}{{item.head[0]}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> </block> <block wx:if='{{item.essayhead}}'> <block wx:if='{{item.essaycustom === 1 && item.essaycustomhead !==""}}'> <image wx:key="id" id="{{item.eid}}-{{index}}" src="{{imgHost}}{{item.essaycustomhead}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> <block wx:else> <image wx:key="id" id="{{item.eid}}-{{index}}" src="{{imgHost}}{{item.essayhead[0]}}" bindload="onImageLoad" data-last='{{index === (newAddEssays.length - 1) ? true : false}}'></image> </block> </block> </block> </view> |
onImageLoad: async function (e) { let isLast = e.currentTarget.dataset.last; console.log("isLast is ", isLast); let imageId = Number(e.currentTarget.id.split('-')[0]); let imageIndex = Number(e.currentTarget.id.split('-')[1]); console.log("imageIndex is ",imageIndex); let oImgW = e.detail.width; //图片原始宽度 let oImgH = e.detail.height; //图片原始高度 let imgWidth = this.data.imageWidth; //图片设置的宽度 let scale = imgWidth / oImgW; //比例计算 let imgHeight = oImgH * scale; //自适应高度 //新请求的文章数据 let images = this.data.newAddEssays; let imageLen = images.length; let imageObj = null; for (let i = 0; i < imageLen; i++) { let img = images[i]; if (img.shopeid && img.shopeid === imageId) { imageObj = img; break; } else if (img.pid && img.pid === imageId) { imageObj = img; } else if (img.eid && img.eid === imageId) { imageObj = img; } } if(imageObj !== null){ imageObj.height = imgHeight; //记录下该图片是第几个被加载的 imageObj.index = imageIndex; console.log("imageObj is ", imageObj); let loadingCount = this.data.loadingCount - 1; let col1 = this.data.col1; let col2 = this.data.col2; //只要第一列的列高度小于第二列就往第一列放，否则往第二列放 if (this.data.col1H <= this.data.col2H) { this.data.col1H += imgHeight; col1.push(imageObj); } else { this.data.col2H += imgHeight; col2.push(imageObj); } console.log("col1 is ", col1); console.log("col1H is ", this.data.col1H); console.log("col2 is ", col2); console.log("col2H is ", this.data.col2H); this.setData({ col1H: this.data.col1H, col2H: this.data.col2H }) let data = { loadingCount: loadingCount, col1: col1, col2: col2, loadOver: true }; if (!loadingCount) { data.images = []; } await this.setData(data, () => { wx.hideLoading(); }); if (isLast) { console.log("col1 is ", col1); console.log("col2 is ", col2); //渲染完图片之后将新加的文章添加到文章列表中去 // this.data.dataArray.push(...this.data.newAddEssays); //对col1的每个元素进行排序和col2的每个元素进行排序 // this.setData({ // col1 : this.data.col1, // col2 : this.data.col2, // loadOver : true // },()=>{ // wx.hideLoading(); // }) } } }, |
