- 图片加载顺序问题
在进行瀑布流布局的时候,需要根据图片的高度进行瀑布流布局,另外一个需求是根据浏览量进行从左到右显示,服务器发送的是根据流量排好序的数据,但是我用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();[代码][代码] [代码][代码]// })[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码]
2018-12-21 - 请问小程序左上角的「 返回」 +「 首页」按钮是怎么设置的?
图片是【知乎热榜】小程序的内页,请问小程序左上角的「 返回」 +「 首页」按钮是怎么设置的? [图片]
2018-09-18