收藏
回答

图片加载顺序问题

在进行瀑布流布局的时候,需要根据图片的高度进行瀑布流布局,另外一个需求是根据浏览量进行从左到右显示,服务器发送的是根据流量排好序的数据,但是我用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  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏