xiaoliao998
xiaoliao998
  • 发布:2020-08-20 01:38
  • 更新:2023-02-14 09:35
  • 阅读:1116

【报Bug】nvue list与waterfall组件内容会重绘,图片会变白,BUG严重,测试一天发现是refresh组件导致的,请官方排查

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: Alpha

HBuilderX版本号: 2.8.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: P40

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="page">  
        <swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="2000" :current="tabIndex"  
         @change="onswiperchange" ref="swiper1" :style="{ height: screenHeight + 'px' }">  
            <swiper-item v-for="(page, index1) in pageList" :key="index1">  
                <waterfall :scrollable="true" :show-scrollbar="false" offset-accuracy="0" @loadmore="loadMore" ref="list"  
                 columnCount="2" :column-gap="10" loadmoreoffset="10" :left-gap='10' :right-gap='10' class='flex-1 bg-white w-100 '>  
                 <!-- 如果没有refresh组件,则一切正常,但是如果加上refresh组件,出现的问题是,会重新绘图,导致页面排序完全乱了,另外 还会出现图片闪现,list组件上也有这个图片闪现问题 -->  
                    <refresh style="width:750rpx;height:100rpx;text-align: center;" @refresh="onrefresh" @pullingdown="onpullingdown"  
                     :display="page.refreshing ? 'show' : 'hide'" v-if='!page.loadMorIng'>  
                        <text>{{ page.refreshText }}</text>  
                    </refresh>  
                    <cell v-for="(item, index) in page.list" :key="index">  
                        <div class="bg-white" style='margin-bottom:50px'>  
                            <image class="imageCover" :src="item.cover" resize="cover" :style="{ height: item.height + 'rpx' }"></image>  
                        </div>  
                    </cell>  
                </waterfall>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    let page = [{  
            "cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 224,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "a232",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 180,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "323b",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 300,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "c444",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 400,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "d222",  
        },  
{  
            "cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 224,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "a232",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 180,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "323b",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 300,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "c444",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 400,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "d222",  
        },  
{  
            "cover": "https://img.alicdn.com/imgextra/i1/96030687/O1CN01v2iRet1Gwgh44UJIB_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 224,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "a232",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i2/1095690080/O1CN01fClG9l1CSgHVlBeIy_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 180,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "323b",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i3/43867526/O1CN01Pgb8W125SxNXGM5fQ_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 300,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "c444",  
        },  
        {  
            "cover": "https://img.alicdn.com/imgextra/i4/47563215/O1CN01j4yenn1ZcVwjmxyka_!!0-saturn_solar.jpg_220x220.jpg_.webp",  
            "height": 400,  
            "contentText": "测试来一测试来一发发",  
            "nickName": "sed",  
            "contentId": "d222",  
        },  

    ]  
    export default {  
        data() {  
            return {  
                screenHeight: 0,  
                tabIndex: 0,  
                pageList: []  
            }  
        },  
        onLoad() {  
            this.getInfo()  
            for (let i = 0; i < 3; i++) {  
                this.pageList.push({  
                    list: page,  
                    loadMorIng: false,  
                    refreshing: false,  
                    refreshFlag: false,  
                    refreshText: '',  
                    pulling: false,  
                })  
            }  

        },  

        computed:{  
            activePage(){  
                return this.pageList[this.tabIndex]  
            }  
        },  

        methods: {  
            onswiperchange(e) {  
                let index = e.detail.current;  
                this.tabIndex = index;  
            },  

            getInfo() {  
                uni.getSystemInfo({  
                    success: res => {  
                        this.screenHeight = res.windowHeight;  
                    }  
                });  
            },  

            loadMore(e) {  
                if(this.activePage.loadMorIng){  
                    return  
                }  
                this.activePage.loadMorIng =true  
                this.getList(2)  
            },  

            getList(action=1){  
                uni.showLoading({  
                    mask:true,  
                    title:'加载中'  
                })  
                setTimeout(() => {  
                    if(action==1){  
                        this.activePage.list = page  
                    }else {  
                        this.activePage.list = this.activePage.list.concat(page)  
                    }  
                    this.activePage.refreshing = false;  
                    this.activePage.loadMorIng = false  
                    this.activePage.pulling = true;  
                    this.activePage.refreshFlag = false;  
                    this.tabClick = false  
                    this.activePage.refreshText = ''  
                    uni.hideLoading()  
                }, 1000)  
            },  

            onrefresh(e) {  
                if (this.activePage.refreshing) {  
                    return;  
                }  
                this.activePage.refreshing = true;  
                this.activePage.refreshText = '正在刷新...';  
                this.getList(1);  
            },  

            onpullingdown(e) {  
                if (this.activePage.refreshing) {  
                    return;  
                }  
                this.activePage.pulling = false;  
                if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {  
                    this.activePage.refreshFlag = true;  
                    this.activePage.refreshText = '释放立即刷新';  
                } else {  
                    this.activePage.refreshFlag = false;  
                    this.activePage.refreshText = '下拉可以刷新';  
                }  
            },  

        }  
    }  
</script>  

<style scoped>  
    .swiper {  
        position: fixed;  
        top: 0;  
        left: 0;  
        right: 0;  
        bottom: 0  
    }  

    .bg-white {  
        background-color: #FFFFFF;  
    }  

    .flex-1 {  
        flex: 1;  
    }  

    .imageCover {  
        width: 337rpx;  
    }  
</style>  

操作步骤:

你只需要将我的代码,编译,然后上拉 触发 loadmore 加载,就会发现整个页面,图像会全部刷新,类似重绘了,

但是当你去掉refresh,注释掉refresh代码,又会发现,又全部正常了

预期结果:

正常使用refresh 并合理追加,上层结构不变,也不会受到任何影响,

实际结果:

第一个,整个图像全部刷新,视觉上会有点反常,与传统app不同,并且在重绘过程中,还会出现有些图片白屏情况。第二个,我示例是waterfall 瀑布流,重绘后会发现,又进行了一次自动排序,眼花缭乱的感觉,正常方式,都是从底部追加新内容,但是上层结构是不变的!这问题我们无解了,只有靠官方解决了,否则refresh 就是巨坑,变成了鸡肋,实际项目中,如果refresh存在这种问题,根本就不会使用的

bug描述:

1,使用refresh组件后加载数据后发现,list 或者 waterfall 出现页面重绘问题,特别是waterfall 直接造成了重新布局,测试了一天,到凌晨1点半,望反馈,

2,demo我也好了,直接复制我代码,调试即可

3

2020-08-20 01:38 负责人:DCloud_Android_ST 分享
已邀请:
xiaoliao998

xiaoliao998 (作者) - null

冒泡 坐等

xiaoliao998

xiaoliao998 (作者) - null

这问题 看来很棘手啊,不要沉,APP级别的大问题

xiaoliao998

xiaoliao998 (作者) - null

请求确认

xiaoliao998

xiaoliao998 (作者) - null

求关注

DCloud_Android_ST

DCloud_Android_ST

你好 请试用HX2.8.9版本 修复了 App平台 修复 nvue refresh 组件偶现下拉刷新结束后不复位的Bug 可能与你描述的问题是同一个。

  • xiaoliao998 (作者)

    刚更新到最新版,2.8.9.20200829-alpha,重新打包了基座,问题依旧啊 弟兄

    2020-09-01 17:08

  • DCloud_Android_ST

    回复 xiaoliao998: 录个视频我看下效果 我这边测试没发现什么图片变白等问题

    2020-09-01 17:12

xiaoliao998

xiaoliao998 (作者) - null

去掉refresh一切正常,图片是从下生成

xiaoliao998

xiaoliao998 (作者) - null

存在refresh,不正常,图片显白,图片加载会导致重新布局,并且,你可以观察到 是整体刷新了,类似重绘了

  • DCloud_Android_ST

    Key不要用index、在每条数据里加一个唯一标识

    2020-09-03 20:10

  • DCloud_Android_ST

    https://uniapp.dcloud.net.cn/component/list 参考

    2020-09-03 20:11

2***@qq.com

2***@qq.com

楼主您好,请问您的问题解决了吗,我也遇到了这个bug,很头疼。去掉refresh,瀑布的首2个数据column-gap也会有异常

要回复问题请先登录注册