注册 登录
a***@yiquhudong.com
a***@yiquhudong.com
  • 发布：2022-07-08 16:52
  • 更新：2023-04-04 23:34
  • 阅读：608

【报Bug】waterfall组件实现瀑布流时，图片下拉加载后回到顶部，顶部图片错位，每次加载回到顶部必出现

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： Monterey

HBuilderX类型： 正式

HBuilderX版本号： 3.4.18

手机系统： Android

手机系统版本号： Android 12

手机厂商： OPPO

手机机型： Reno6 5G

页面类型： nvue

vue版本： vue2

打包方式： 云端

项目创建方式： HBuilderX

示例代码：

<template>
<view class="flex-col"> 

    <view style="width: 750rpx;height: 180rpx;background-color: #f00;position: fixed;">  

    </view>  

    <view :style="{  
            height:fallHeight+'rpx',  
            marginTop:180+'rpx'  
        }">  

        <!--   -->  
        <waterfall left-gap="10" right-gap="10" column-gap="10"  
        column-count="3" column-width="auto" @loadmore="loadMore">  

            <refresh :display="refreshing ? 'show' : 'hide'"   
            @refresh="onrefresh" @pullingdown="onpullingdown" style="background-color: #fff;">  
                <view class="refresh-more">  
                    <loading-indicator style="margin-right:15px;"></loading-indicator>  
                    <text class="refresh-more-text">{{refreshText}}</text>  
                </view>  
            </refresh>  

            <cell v-for="(item,index) in images" @click="onItem(item)">  

                <view class="cell-item" :style="{  
                        width:item.width,  
                        height:item.height  
                    }">  
                    <image :src="item.url" style="width: 100%;height: 100%;"  
                    mode="widthFix" @load="function(e){  
                        imageLoadEnd(e,index)  
                    }">  
                    </image>  
                </view>  

            </cell>  
        </waterfall>  
    </view>  

</view>

</template>

<script>
export default { 

    data(){  
        return {  

            show:true,  

            images:[],  

            refreshing:false,  

            fallHeight:1334,  
            is_loading:false,  
            refreshText:"下拉刷新",  

            gap:uni.upx2px(15),  
            cellWidth:uni.upx2px(230),  

        }  
    },  

    onLoad(){  

        var self = this;  
        uni.getSystemInfo({  
            success(res) {  
                let rate = res.windowHeight / res.windowWidth;  
                self.fallHeight = Math.floor(750*rate) - 180;  

                self.initData();  
            }  
        });  

        // let info = JSON.parse(uni.getStorageSync("ljcp_device_info"));  
        // this.fallHeight = info.screenHeight - 180;  
        // this.initData();  

    },  

    methods:{  

        initData(){  

            var images = [  
                "https://pica.zhimg.com/80/v2-a5694c6d4df3b2643c7a3d00bc4a391d_1440w.jpg?source=1940ef5c",  
                "https://pic3.zhimg.com/80/v2-f3022996372b57a61dc410d62f7b2428_1440w.jpg?source=1940ef5c",  
                "https://pic1.zhimg.com/80/v2-836a95812571cf749a5c154b8026a062_1440w.jpg?source=1940ef5c",  
                "https://pic1.zhimg.com/80/v2-09ff73d07b577eee41108084fd15cd2b_1440w.jpg?source=1940ef5c",  
                "https://pic2.zhimg.com/80/v2-efc8a3d5afa27860e1129839a1fbd01b_1440w.jpg?source=1940ef5c",  
                "https://pic1.zhimg.com/80/v2-2490986241fa0714b3da1f627f2620d9_1440w.jpg?source=1940ef5c",  
                "https://pica.zhimg.com/80/v2-f3c46e4356b841689ab096d6393b9064_1440w.jpg?source=1940ef5c",  
                "https://pic3.zhimg.com/80/v2-67e6dc1ff81454265c37a36a17403d9a_1440w.jpg?source=1940ef5c",  
                "https://pic2.zhimg.com/80/v2-0897247647072ab0b71e98c2a18a970d_1440w.jpg?source=1940ef5c",  
                "https://pic3.zhimg.com/80/v2-802930ea3965ffc5039b1091f03a20a9_1440w.jpg?source=1940ef5c",  
                "https://pic4.zhimg.com/80/v2-8d2da18fc57beee58a11143e4db9969c_1440w.jpg?source=1940ef5c",  
                "https://pica.zhimg.com/80/v2-e3d2a764ebd359460beda1247677cb15_1440w.jpg?source=1940ef5c",  
                "https://pic2.zhimg.com/80/v2-50bfcc8102f958e96427dd405256e86b_1440w.jpg?source=1940ef5c",  
                "https://pic3.zhimg.com/80/v2-5849457917ee0d1a624e36be2e3f9ad7_1440w.jpg?source=1940ef5c",  
                "https://pic2.zhimg.com/80/v2-5601c57da973b90c90f500a79a56b839_1440w.jpg?source=1940ef5c",  
                "https://pic1.zhimg.com/80/v2-0f94922ee855a5e165d4a8c295070765_1440w.jpg?source=1940ef5c",  
                "https://pic2.zhimg.com/80/v2-6c213b621d551b1e26527f862f9979b3_1440w.jpg?source=1940ef5c",  
                "https://pic3.zhimg.com/80/v2-eb56c737c9ac94ebabbb730e02882e3d_1440w.jpg?source=1940ef5c",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/e8c7eed5-70b3-48fc-9084-b3a31d6347f0.jpeg",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/a5389524-253d-45a1-a6fc-f87b5744c899.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/4ab38ad5-35ae-4504-87ca-d97bcf5c8db1.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/69e0f20c-265a-4b56-aaef-b1415863a092.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/4978eec3-0c63-46f7-b424-b8abcf75e7ef.jpg",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/14/0240ef11-89d0-4bd6-9238-fff7c68e27c6.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/15/fdbd098e-603f-43d5-a978-c5b6797fe2a7.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/15/7c1ace64-05c5-40c4-ab4e-899184675b04.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/15/1fcaa672-f851-4f41-ab78-ffad555dfc56.PNG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/15/d589b7e8-bdac-4f8e-8572-e59a00dc277e.PNG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/17/c3516dd2-5ec9-4257-a351-07a9e5591840.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/17/cbad0de9-da0a-4e93-8f04-94da149e37bd.PNG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/17/88ac9e60-8ea9-49bc-b1f6-d86c824e2365.PNG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/17/c9267bf0-5e99-4051-a557-9a48f4c032a2.PNG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/18/76072772-4307-4867-a066-ac8296a516d3.jpg",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/18/2932b92c-21dc-461c-8bd2-43032100cdf4.JPG",  
                "https://face-yiquhudong.oss-cn-shanghai.aliyuncs.com/lingju/2022/4/19/6df10ff4-210b-475b-a268-7cd42d419db2.JPG",  
                "https://cdn.yiquhudong.com/others/c4c5f886-f0cc-46f5-8c6a-c3fbb8a3b781.png",  
                "https://cdn.yiquhudong.com/others/2ea9aea3-04b2-403c-82ed-87b461b20d08.png",  
                "https://cdn.yiquhudong.com/others/a7af3cb1-540e-46bf-8de5-4f0b7d4590b7.png",  
                "https://cdn.yiquhudong.com/others/f262da59-55b3-4e41-a918-a32dcc7309fa.png",  
                "https://cdn.yiquhudong.com/others/5228b875-d1ed-40cc-a8ed-04f12ebefd2d.png",  
                "https://cdn.yiquhudong.com/others/d0da9f2d-bb84-44dd-aadb-93040164714f.png",  
                "https://cdn.yiquhudong.com/others/620c377c-b945-498a-b40e-36127757cfb2.png",  
                "https://cdn.yiquhudong.com/others/73291dce-8c31-4e30-933e-27ddae66a585.png",  
                "https://cdn.yiquhudong.com/others/0ca5d9a8-7819-4dd6-874a-2e55f92172d4.png",  
                "https://cdn.yiquhudong.com/others/7c4236c0-3b4c-4cc6-bd03-2447c43db6bd.png",  
                "https://cdn.yiquhudong.com/others/bcb539f5-1690-4549-b9fa-fd0149369d3d.png",  
                "https://cdn.yiquhudong.com/others/ea58750f-9afa-4e65-8ad3-cf6d956a73af.png",  
                "https://cdn.yiquhudong.com/others/9308f67d-aee6-4fc6-b816-9e2cbf4ea260.png",  
                "https://cdn.yiquhudong.com/others/bc41ec48-880c-4660-8a70-f0003f8e348c.png"  
            ];  

            var self = this;  
            for(let k = 0;k < images.length;k++){  

                uni.getImageInfo({  
                    src:images[k],  
                    success:function(res){  

                        //console.log("k:   " + k);  
                        let width = uni.upx2px(230);  
                        let height = Math.floor( res.height / res.width * width );  

                        self.images.push({  
                            width:width+'px',  
                            height:height+'px',  
                            url:images[k]  
                        });  
                    }  
                });  
            }  
        },  

        // 下拉刷新  
        onrefresh(e) {          
            var images = [  

                "https://img-new-cdn.whalean.com/wallpaper-material/Ak6NmyEaAu5W_1640653782406.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/j4rYpzZU7nfw_1640653782447.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/k8WyujMKcW5C_1640653782504.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/U2jVCe6RpO6K_1640653782506.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/rzrIafnFPAdJ_1640653782494.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/WlDHMIMmF8EQ_1640653782498.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/UCvJmSgRuHPy_1640653717183.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/5kHHylurRBeA_1640653717117.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/xjXRoF4Qbhqv_1640653717174.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Gn2GvKArZ3xW_1640653717176.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/qUSCk4AyJvp1_1640653717189.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/TJNIykzQPWjO_1640653717184.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/PSiAodesDcE8_1640653717221.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/J1U69FpH3L6i_1640653717170.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/k3DYXkoD4rSK_1640653717219.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/rgUhHzgnkYzG_1640567708656.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Buy3WxQHSbon_1640567708752.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/E5D4MOvIwpvp_1640567708712.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/8mo5OaO99jnB_1640567708731.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/vTn3ODWnqk49_1640567708760.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/YIqRUBA4EpDn_1640567708736.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/g3mCzVVhDKS4_1640567643149.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/I4pbFm3cjdtQ_1640567643219.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/mHUW8DJGJiYo_1640567643227.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/kE4KJ9fDtA6q_1640567643229.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/m7EJPba54jYu_1640567643200.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/aGr9lbx7mcRj_1640567643178.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/GMUJrDw4ghg5_1640567643222.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/oDIEF9j4qsJr_1640567643220.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/1ruOWyeGNUTY_1640567643097.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/RbVR4Ww1yB1N_1640310313907.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/GGRxStc7ZtEt_1640310313968.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/b68tnK8mG3mO_1640310313958.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Sk3dtd4O6Wjn_1640310314005.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/E1HZlrXp8bvX_1640310314018.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/32kaBCinackK_1640310314016.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/V9yXy2XJ6WQt_1640310248509.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/wVX4I7lLwRgX_1640310248551.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/r2CauBeYa5PF_1640310248544.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/qsvaM8Vuzy5O_1640310248509.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/1DBNEjBBOqIg_1640310248507.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/AZdwWYZPVihn_1640310248549.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/BPhIldQRUvyc_1640310248561.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/6qMSJjv7C8Dx_1640310248555.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/xH6xLZcYZGMC_1640310248560.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/RMfMM42TMRLS_1640310189926.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/pJmSgpZyfZKt_1640310189905.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/UkqHXOW1wL1B_1640310189916.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/HAR6nQqkThxP_1640310189912.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/JuXrUZQjVrqi_1640310189920.JPG"  
            ];  

            this.refreshing = true;  

            var self = this;  
            //模拟下拉刷新  
            setTimeout(function(){  
                self.is_loading = false;  
                self.refreshing = false;  
                self.images = [];  
                for(let k = 0;k < images.length;k++){  
                    uni.getImageInfo({  
                        src:images[k],  
                        success:function(res){  

                            //console.log("k:   " + k);  
                            let width = uni.upx2px(230);  
                            let height = Math.floor( res.height / res.width * width );  

                            self.images.push({  
                                width:width+'px',  
                                height:height+'px',  
                                url:images[k]  
                            });  

                        }  
                    });  
                }  

            },1000);  

        },  

        // 下拉刷新过程  
        onpullingdown(e) {        
            if (this.refreshing) {  
                return;  
            }  
            if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {  
                this.refreshText = "释放立即刷新";  
            } else {  
                this.refreshText = "下拉可以刷新";  
            }  
        },  

        onItem(item){  

            //console.log(item);  

        },  

        loadMore(){  

            var images = [  
                "https://img-new-cdn.whalean.com/wallpaper-material/Ak6NmyEaAu5W_1640653782406.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/j4rYpzZU7nfw_1640653782447.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/k8WyujMKcW5C_1640653782504.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/U2jVCe6RpO6K_1640653782506.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/rzrIafnFPAdJ_1640653782494.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/WlDHMIMmF8EQ_1640653782498.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/UCvJmSgRuHPy_1640653717183.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/5kHHylurRBeA_1640653717117.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/xjXRoF4Qbhqv_1640653717174.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Gn2GvKArZ3xW_1640653717176.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/qUSCk4AyJvp1_1640653717189.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/TJNIykzQPWjO_1640653717184.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/PSiAodesDcE8_1640653717221.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/J1U69FpH3L6i_1640653717170.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/k3DYXkoD4rSK_1640653717219.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/rgUhHzgnkYzG_1640567708656.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Buy3WxQHSbon_1640567708752.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/E5D4MOvIwpvp_1640567708712.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/8mo5OaO99jnB_1640567708731.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/vTn3ODWnqk49_1640567708760.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/YIqRUBA4EpDn_1640567708736.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/g3mCzVVhDKS4_1640567643149.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/I4pbFm3cjdtQ_1640567643219.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/mHUW8DJGJiYo_1640567643227.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/kE4KJ9fDtA6q_1640567643229.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/m7EJPba54jYu_1640567643200.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/aGr9lbx7mcRj_1640567643178.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/GMUJrDw4ghg5_1640567643222.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/oDIEF9j4qsJr_1640567643220.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/1ruOWyeGNUTY_1640567643097.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/RbVR4Ww1yB1N_1640310313907.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/GGRxStc7ZtEt_1640310313968.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/b68tnK8mG3mO_1640310313958.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/Sk3dtd4O6Wjn_1640310314005.jpg",  
                "https://img-new-cdn.whalean.com/wallpaper-material/E1HZlrXp8bvX_1640310314018.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/32kaBCinackK_1640310314016.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/V9yXy2XJ6WQt_1640310248509.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/wVX4I7lLwRgX_1640310248551.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/r2CauBeYa5PF_1640310248544.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/qsvaM8Vuzy5O_1640310248509.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/1DBNEjBBOqIg_1640310248507.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/AZdwWYZPVihn_1640310248549.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/BPhIldQRUvyc_1640310248561.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/6qMSJjv7C8Dx_1640310248555.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/xH6xLZcYZGMC_1640310248560.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/RMfMM42TMRLS_1640310189926.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/pJmSgpZyfZKt_1640310189905.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/UkqHXOW1wL1B_1640310189916.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/HAR6nQqkThxP_1640310189912.JPG",  
                "https://img-new-cdn.whalean.com/wallpaper-material/JuXrUZQjVrqi_1640310189920.JPG"  
            ];  

            this.is_loading = false;  
            // 网络请求 下拉加载更多数据  
            var self = this;  
            for(let k = 0;k < images.length;k++){  
                uni.getImageInfo({  
                    src:images[k],  
                    success:function(res){  

                        //console.log("k:   " + k);  
                        let width = uni.upx2px(230);  
                        let height = Math.floor( res.height / res.width * width );  

                        // 重大BUG  
                        // 触发loadMore后加入数据后,回到顶部发现图片错位（不触发下拉刷新）  
                        // 每次加载新的一页再返回顶部（不触发下拉刷新）,图片依然错位  

                        self.images.push({  
                            width:width+'px',  
                            height:height+'px',  
                            url:images[k]  
                        });  
                    }  
                });  
            }  
        },  

        imageLoadEnd(e,index){  

            var width = e.detail.width;  
            var height = e.detail.height;  
            // this.images[index].width = uni.upx2px(230)+'px';  
            // this.images[index].height = (Math.floor(uni.upx2px(230) * height / width))+'px';  
        }  

    }  

}

</script>

<style> 

.cell-item{  
    margin-top: 10px;  
    background-color: #f00;  
}  

.refresh-more {  
    display:flex;  
    align-items: center;  
    justify-content: center;  
    padding-top: 14px;  
    padding-bottom: 14px;  
    text-align: center;  
    width: 750rpx;  
}  

.refresh-more-text {  
    font-size: 24rpx;  
    color: #999;  
    margin-top:20rpx;  
}

</style>

操作步骤：

复制代码直接到uniapp工程中运行即可。

预期结果：

waterfall组件实现瀑布流时，图片下拉加载后回到顶部，顶部图片不出现错位。

实际结果：

waterfall组件实现瀑布流时，图片下拉加载后回到顶部，顶部图片错位。

bug描述：

waterfall组件实现瀑布流时，图片下拉加载后回到顶部，顶部图片错位，每次加载回到顶部必出现，下面的代码复制到纯粹的nvue文件中即可测试。

2022-07-08 16:52 负责人:无 分享

没有找到相关结果

    已邀请:
    a***@yiquhudong.com

    a***@yiquhudong.com (作者)

    附件中是完整代码 txt文件

    2022-07-08 16:58 分享
    DYY

    DYY - DYY

    请问你解决了吗？我也遇到这种问题

    2023-04-04 22:48 分享
    DYY

    DYY - DYY

    阿阿，遇到这种问题，怎么解决呀

    2023-04-04 23:34 分享

    • j***@gmail.com

      这个问题很多人反馈,目前的解决方案就是 left-gap right-gap 这几个属性不用,自己写样式

      2023-05-25 16:00

    评论 取消
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报