有事没事打断点
有事没事打断点
  • 发布:2022-08-07 11:42
  • 更新:2022-08-27 08:27
  • 阅读:514

【报Bug】官方顶部选项卡nuve示例,list替换为waterfall,切换swiper页码大于两页就会导致,瀑布流布局错乱,必复现!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 10

手机厂商: realme

手机机型: x7 pro

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="tabs">  
        <button @click="remove">更改swiper</button>  
        <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"  
            :scroll-into-view="scrollInto">  
            <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"  
                @click="ontabtap">  
                <text class="uni-tab-item-title"  
                    :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>  
            </view>  
        </scroll-view>  
        <view class="line-h"></view>  
        <swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">  
            <swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">  
                <!-- #ifdef APP-NVUE -->  
                <waterfall column-count="2" :column-width="'auto'" :column-gap="0">  
                    <cell v-for="item in tab.data" :key="item.id" style='justify-content: center;align-items: center;'>  
                        <view style="width:160px; margin-bottom:20rpx;" :style="{backgroundColor:tab.color}">  
                            <view :style="{height:`${item.height}px`}">  
                                {{index1}}  
                            </view>  
                            <view>{{item.title}}</view>  
                        </view>  

                    </cell>  
                </waterfall>  
                <!-- #endif -->  
                <!-- #ifndef APP-NVUE -->  
                <scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">  
                    <view v-for="(newsitem,index2) in tab.data" :key="newsitem.id">  
                        <media-item :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)">  
                        </media-item>  
                    </view>  
                    <view class="loading-more" v-if="tab.isLoading || tab.data.length > 4">  
                        <text class="loading-more-text">{{tab.loadingText}}</text>  
                    </view>  
                </scroll-view>  
                <!-- #endif -->  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  
<script>  
    import mediaItem from './news-item.nvue';  

    // 缓存每页最多  
    const MAX_CACHE_DATA = 100;  
    // 缓存页签数量  
    const MAX_CACHE_PAGE = 3;  

    const newsData = {  
        data0: {  
            "datetime": "40分钟前",  
            "article_type": 0,  
            "title": "uni-app行业峰会频频亮相,开发者反响热烈!",  
            "source": "DCloud",  
            "comment_count": 639  
        },  
        data1: {  
            "datetime": "一天前",  
            "article_type": 1,  
            "title": "DCloud完成B2轮融资,uni-app震撼发布!",  
            "image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg",  
            "source": "DCloud",  
            "comment_count": 11395  
        },  
        data2: {  
            "datetime": "一天前",  
            "article_type": 2,  
            "title": "中国技术界小奇迹:HBuilder开发者突破200万",  
            "image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4cd3000-517d-11eb-a16f-5b3e54966275.jpg",  
            "source": "DCloud",  
            "comment_count": 11395  
        },  
        data3: {  
            "article_type": 3,  
            "image_list": [{  
                "url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b2e201d0-517d-11eb-8a36-ebb87efcf8c0.jpg",  
                "width": 563,  
                "height": 316  
            }, {  
                "url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b4cd3000-517d-11eb-a16f-5b3e54966275.jpg",  
                "width": 641,  
                "height": 360  
            }, {  
                "url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg",  
                "width": 640,  
                "height": 360  
            }],  
            "datetime": "5分钟前",  
            "title": "uni-app 支持使用 npm 安装第三方包,生态更趋丰富",  
            "source": "DCloud",  
            "comment_count": 11  
        },  
        data4: {  
            "datetime": "2小时前",  
            "article_type": 4,  
            "title": "uni-app 支持原生小程序自定义组件,更开放、更自由",  
            "image_url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b2e201d0-517d-11eb-8a36-ebb87efcf8c0.jpg",  
            "source": "DCloud",  
            "comment_count": 69  
        }  
    };  

    export default {  
        components: {  
            mediaItem  
        },  
        data() {  
            return {  
                newsList: [],  
                cacheTab: [],  
                tabIndex: 0,  
                tabBars: [{  
                    name: '关注',  
                    id: 'guanzhu',  
                    color:'#FFB3BF'  
                }, {  
                    name: '推荐',  
                    id: 'tuijian',  
                    color:'#B37D8B'  
                }, {  
                    name: '体育',  
                    id: 'tiyu',  
                    color:'#FFC8B3'  
                }, {  
                    name: '热点',  
                    id: 'redian',  
                    color:'#FFB3F6'  
                }, {  
                    name: '财经',  
                    id: 'caijing',  
                    color:'#B37DAC',  
                }, {  
                    name: '娱乐',  
                    id: 'yule',  
                    color:'#B3D4FF'  
                }, {  
                    name: '军事',  
                    id: 'junshi',  
                    color:'##B3AF7D'  
                }, {  
                    name: '历史',  
                    id: 'lishi',  
                    color:'#FFFAB3'  
                }, {  
                    name: '本地',  
                    id: 'bendi',  
                    color:'#B37D8B'  
                }],  
                scrollInto: "",  
                showTips: false,  
                navigateFlag: false,  
                pulling: false,  
                refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg=="  
            }  
        },  
        onLoad() {  
            setTimeout(() => {  
                this.tabBars.forEach((tabBar, i) => {  
                    this.newsList.push({  
                        data: [],  
                        isLoading: false,  
                        refreshText: "",  
                        loadingText: '加载更多...',  
                        page: i,  
                        color: tabBar.color  
                    });  
                });  
                this.getList(0);  
            }, 350)  

        },  
        methods: {  
            remove() {  
                this.newsList.splice(1, 1)  
            },  
            getList(index) {  
                let activeTab = this.newsList[index];  
                let list = [];  
                let heightArr = [160, 190, 120, 100, 150, 110, 140, 140, 100, 150, 160, 190, 120, 100, 150, 110, 140, 140,  
                    100, 150  
                ]  
                for (let i = 1; i <= 20; i++) {  
                    let item = Object.assign({}, newsData['data' + Math.floor(Math.random() * 5)]);  
                    item.id = this.newGuid();  
                    item.height = heightArr[i]  
                    list.push(item);  
                }  
                activeTab.data = activeTab.data.concat(list);  
                console.log(this.newsList)  
            },  
            goDetail(e) {  
                if (this.navigateFlag) {  
                    return;  
                }  
                this.navigateFlag = true;  
                uni.navigateTo({  
                    url: './detail/detail?title=' + e.title  
                });  
                setTimeout(() => {  
                    this.navigateFlag = false;  
                }, 200)  
            },  
            close(index1, index2) {  
                uni.showModal({  
                    content: '是否删除本条信息?',  
                    success: (res) => {  
                        if (res.confirm) {  
                            this.newsList[index1].data.splice(index2, 1);  
                        }  
                    }  
                })  
            },  
            loadMore(e) {  
                setTimeout(() => {  
                    this.getList(this.tabIndex);  
                }, 500)  
            },  
            ontabtap(e) {  
                let index = e.target.dataset.current || e.currentTarget.dataset.current;  
                this.switchTab(index);  
            },  
            ontabchange(e) {  
                let index = e.target.current || e.detail.current;  
                this.switchTab(index);  
            },  
            switchTab(index) {  
                if (this.newsList[index].data.length === 0) {  
                    this.getList(index);  
                }  

                if (this.tabIndex === index) {  
                    return;  
                }  

                // 缓存 tabId  
                if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {  
                    let isExist = this.cacheTab.indexOf(this.tabIndex);  
                    if (isExist < 0) {  
                        this.cacheTab.push(this.tabIndex);  
                        //console.log("cache index:: " + this.tabIndex);  
                    }  
                }  

                this.tabIndex = index;  
                this.scrollInto = this.tabBars[index].id;  

                // 释放 tabId  
                if (this.cacheTab.length > MAX_CACHE_PAGE) {  
                    let cacheIndex = this.cacheTab[0];  
                    this.clearTabData(cacheIndex);  
                    this.cacheTab.splice(0, 1);  
                    //console.log("remove cache index:: " + cacheIndex);  
                }  
            },  
            clearTabData(e) {  
                this.newsList[e].data.length = 0;  
                this.newsList[e].loadingText = "加载更多...";  
            },  
            refreshData() {},  
            onrefresh(e) {  
                var tab = this.newsList[this.tabIndex];  
                if (!tab.refreshFlag) {  
                    return;  
                }  
                tab.refreshing = true;  
                tab.refreshText = "正在刷新...";  

                setTimeout(() => {  
                    this.refreshData();  
                    this.pulling = true;  
                    tab.refreshing = false;  
                    tab.refreshFlag = false;  
                    tab.refreshText = "已刷新";  
                    setTimeout(() => { // TODO fix ios和Android 动画时间相反问题  
                        this.pulling = false;  
                    }, 500);  
                }, 2000);  
            },  
            onpullingdown(e) {  
                var tab = this.newsList[this.tabIndex];  
                if (tab.refreshing || this.pulling) {  
                    return;  
                }  
                if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {  
                    tab.refreshFlag = true;  
                    tab.refreshText = "释放立即刷新";  
                } else {  
                    tab.refreshFlag = false;  
                    tab.refreshText = "下拉可以刷新";  
                }  
            },  
            newGuid() {  
                let s4 = function() {  
                    return (65536 * (1 + Math.random()) | 0).toString(16).substring(1);  
                }  
                return (s4() + s4() + "-" + s4() + "-4" + s4().substr(0, 3) + "-" + s4() + "-" + s4() + s4() + s4())  
                    .toUpperCase();  
            }  
        }  
    }  
</script>  

<style>  
    /* #ifndef APP-PLUS */  
    page {  
        width: 100%;  
        min-height: 100%;  
        display: flex;  
    }  

    /* #endif */  

    .tabs {  
        flex: 1;  
        flex-direction: column;  
        overflow: hidden;  
        background-color: #ffffff;  
        /* #ifndef APP-PLUS */  
        height: 100vh;  
        /* #endif */  
    }  

    .scroll-h {  
        width: 750rpx;  
        /* #ifdef H5 */  
        width: 100%;  
        /* #endif */  
        height: 80rpx;  
        flex-direction: row;  
        /* #ifndef APP-PLUS */  
        white-space: nowrap;  
        /* #endif */  
        /* flex-wrap: nowrap; */  
        /* border-color: #cccccc;  
        border-bottom-style: solid;  
        border-bottom-width: 1px; */  
    }  

    .line-h {  
        height: 1rpx;  
        background-color: #cccccc;  
    }  

    .uni-tab-item {  
        /* #ifndef APP-PLUS */  
        display: inline-block;  
        /* #endif */  
        flex-wrap: nowrap;  
        padding-left: 34rpx;  
        padding-right: 34rpx;  
    }  

    .uni-tab-item-title {  
        color: #555;  
        font-size: 30rpx;  
        height: 80rpx;  
        line-height: 80rpx;  
        flex-wrap: nowrap;  
        /* #ifndef APP-PLUS */  
        white-space: nowrap;  
        /* #endif */  
    }  

    .uni-tab-item-title-active {  
        color: #007AFF;  
    }  

    .swiper-box {  
        flex: 1;  
    }  

    .swiper-item {  
        flex: 1;  
        flex-direction: row;  
    }  

    .scroll-v {  
        flex: 1;  
        /* #ifndef MP-ALIPAY */  
        flex-direction: column;  
        /* #endif */  
        width: 750rpx;  
        width: 100%;  
    }  

    .update-tips {  
        position: absolute;  
        left: 0;  
        top: 41px;  
        right: 0;  
        padding-top: 5px;  
        padding-bottom: 5px;  
        background-color: #FDDD9B;  
        align-items: center;  
        justify-content: center;  
        text-align: center;  
    }  

    .update-tips-text {  
        font-size: 14px;  
        color: #ffffff;  
    }  

    .refresh {  
        width: 750rpx;  
        width: 100%;  
        height: 64px;  
        justify-content: center;  
    }  

    .refresh-view {  
        flex-direction: row;  
        flex-wrap: nowrap;  
        align-items: center;  
        justify-content: center;  
    }  

    .refresh-icon {  
        width: 30px;  
        height: 30px;  
        transition-duration: .5s;  
        transition-property: transform;  
        transform: rotate(0deg);  
        transform-origin: 15px 15px;  
    }  

    .refresh-icon-active {  
        transform: rotate(180deg);  
    }  

    .loading-icon {  
        width: 20px;  
        height: 20px;  
        margin-right: 5px;  
        color: #999999;  
    }  

    .loading-text {  
        margin-left: 2px;  
        font-size: 16px;  
        color: #999999;  
    }  

    .loading-more {  
        align-items: center;  
        justify-content: center;  
        padding-top: 10px;  
        padding-bottom: 10px;  
        text-align: center;  
    }  

    .loading-more-text {  
        font-size: 28rpx;  
        color: #999;  
    }  
</style>

操作步骤:

操作流程1:首先瀑布流的每个cell是不同高度的元素,然后2页内切换不会出现问题,但是只要大于两页,之前swiper页的瀑布流元素,就会由原先显示一半参差不齐的状态,变成两个元素对齐的状态,这样就说明上面的元素布局已经错乱了。然后向上滑动以后整个瀑布流会进行抖动,重新还原原先布局。
操作流程2:动态修改swiper数据后(删除某一项swiper页)也会触发上面的问题,会自动跳到手势滑动区最近的cell元素顶部,然后上面的布局错乱,向上滑动,瀑布流重新布局

预期结果:

瀑布流不出现布局错乱

实际结果:

按步骤复现,瀑布流出现错乱

bug描述:

官方顶部选项卡nuve示例,list替换为waterfall,切换swiper页码大于两页,瀑布流布局错乱

2022-08-07 11:42 负责人:无 分享
已邀请:
有事没事打断点

有事没事打断点 (作者)

之前发过一次,可能写的不太清楚,没人回复,这回写的详细一点。
我是想做个swiper+瀑布流的长列表,官网给出的建议是使用nvue更流畅,而且能自定义下拉刷新。然后做完了发现这个问题,自己写的也有显示img,出现这个问题看着更明显,尤其是往下滑的多的时候,非常影响体验,然后就用官方的例复现了一下,结果一样。
希望官方人员可以看一下,如果是waterfall的问题希望官方能尽快解决。我先换成vue页面去写。以后解决了再换回来。

有事没事打断点

有事没事打断点 (作者)

没有人遇到过同样的问题吗?

要回复问题请先登录注册