uni-app nvue瀑布流布局Bug反馈

uni-app nvue瀑布流布局Bug反馈

测试过的手机：

小米9Pro，iphone6s，realme Q2 5G,iphone 7+,iphone X,小米10。。。

操作步骤：

  • 进去就是

预期结果：

  • 正常2列两边排序

实际结果：

  • 上面有2个会靠在一起

bug描述：

用的是nvue的专用组件waterfall，不知道为什么，每次打开上面总有2个会靠在一起，其他都没问题，滚动到下面之后再滚上来就又好了
视频链接：https://xinglanxx.oss-cn-shanghai.aliyuncs.com/demo/2.mp4

图片


更多关于uni-app nvue瀑布流布局Bug反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html

27 回复

沉了吗。。。。

更多关于uni-app nvue瀑布流布局Bug反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html


waterfall 组件上有没有包含 class 属性，没有的话加一下，安卓下有bug，之前测试只要waterfall上不包含class属性，显示就会这样

回复 青阳_1900: 有class啊，<waterfall column-count="2" column-width="auto" class="main" :column-gap="gap" :show-scrollbar="false">

回复 煎饼果子oO: 你这么不行，必须指定宽度，auto 也会有这个问题，参考 https://ask.dcloud.net.cn/article/39444

回复 青阳_1900: 已指定固定宽度，但是还是没有解决，一直刷新还是会出现这种情况，给我的感觉是还没有来的急渲染<waterfall :column-count="2" :column-width="colWidth" class="main" :column-gap="gap" :show-scrollbar="false" :left-gap="lgap" :right-gap="lgap">

可以试用HX3.3.1 alpha 版本 看下问题是否有改善或解决

已更新稳定版3.3.5但是还是没有解决

回复 煎饼果子oO: 请提供下demo示例我们排查下

回复 DCloud_Android_ST: 可以看下我下面的评论，截图下面带了Demo

有结果了吗？初次可能不会有什么问题，但是多刷新几次就会出现了

回复 煎饼果子oO: 瀑布流中的图片需避免使用widthFix或heightFix 会影响排版 目前没有找到好的方式避免。暂时建议对图片宽高都赋值

回复 DCloud_Android_ST: 如果对图片宽高都赋值的话，那瀑布流还有什么意义？都固定宽高了，那应该就不是瀑布流了啊

回复 煎饼果子oO: 建议设置不同的css样式 目前没找到解决方案。

兄弟解决了吗。。

没有

附件，IOS目前没什么问题，主要是安卓，下面截图是小米9Pro测的

waterfall瀑布流效果。cell中的图片需避免使用widthFix或heightFix 会影响排版 目前没有找到好的方式避免。暂时建议对图片宽高都赋值

朋友解决了吗？我也出现了类似问题 IOS上 瀑布流里的图片高度会飘忽不定 甚至能超出屏幕 滑下去再上来就又恢复正常了

scaleToFill模式下置顶高度也会出现这种问题， widthFix也一样

解决了吗兄弟，求解啊，搞了一天了

解决了，兄弟们，这个已经没人去维护了 waterfall组件自带的gap有问题，不要使用它自带的gap,自己去写样式就好了

回复 2***@qq.com: 还是兄弟你给力，确实是gap的问题。我当时也是搞了好久，这个waterfall组件bug是真的莫名其妙，原来是自带gap不要用,自己手动设置间距就没问题了。

能具体说下吗兄弟，我也搞了好久，是把column-gap=“10” :left-gap=“0” :right-gap="0"这些不设置吗

哦哦，用style写间距就好了，总算解决了，谢了兄弟

有点儿东西兄弟,我也是这个问题,现已解决

1.数据源中的数据有问题：如果数据源中的数据有问题，可能会导致 waterfall 组件显示不正常。可以检查一下数据源中的数据是否有误。

组件配置有误：如果组件的配置有误，可能会导致组件显示不正常。可以检查一下组件的配置是否正确。
CSS样式问题
嗯…

这是一个已知的nvue waterfall组件渲染问题。瀑布流在初始加载时，由于列高计算尚未完成，可能导致前几个元素布局异常。当用户滚动触发重新布局后，问题会自行修正。

解决方案：

  1. 数据预加载：在页面onLoad时先加载少量数据（如4-6条），待渲染完成后再追加剩余数据。
  2. 强制刷新：在mounted中使用$nextTick延迟设置数据，或使用this.$forceUpdate()强制更新。
  3. 样式调整：为waterfall-item设置固定宽度，避免依赖自动计算。

代码示例：

// 分批加载数据
setTimeout(() => {
    this.list = initialData; // 先加载部分数据
    setTimeout(() => {
        this.list = allData; // 再加载全部数据
    }, 50);
}, 0);
回到顶部