uni-app waterfall组件含header时安卓苹果表现不一致 不含refresh正常 代码和截图如下

uni-app waterfall组件含header时安卓苹果表现不一致 不含refresh正常 代码和截图如下

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<template>
<waterfall column-count="2" >
<header  slot='header'><loading></loading>  </header>
<refresh>
<loading></loading>
</refresh>
<cell v-for="(i,k) in 10 ">{{i}}</cell>
</waterfall>
</template>

操作步骤：

<template>
<waterfall column-count="2" >
<header  slot='header'><loading></loading>  </header>
<refresh>
<loading></loading>
</refresh>
<cell v-for="(i,k) in 10 ">{{i}}</cell>
</waterfall>
</template>

预期结果：

安卓ios表现一致

实际结果：

bug描述:苹果是从左至右排列，安卓是从右往左排

更多关于uni-app waterfall组件含header时安卓苹果表现不一致 不含refresh正常 代码和截图如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

升级HX到3.1.4试下

更多关于uni-app waterfall组件含header时安卓苹果表现不一致 不含refresh正常 代码和截图如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好 确认了一下 3.1.4 也有这个问题

回复 金猿: 示例提供下

回复 DCloud_Android_ST: <template> <waterfall column-count="2" >

<loading></loading>
<refresh> <loading></loading> </refresh> <cell v-for="(i,k) in 10 ">{{i}}</cell> </waterfall> </template>

回复 DCloud_Android_ST: nvue页面

<template> <waterfall column-count="2" >
<loading></loading>
<refresh> <loading></loading> </refresh> <cell v-for="(i,k) in 10 ">{{i}}</cell> </waterfall> </template>

这是一个已知的uni-app waterfall组件在跨平台渲染时的兼容性问题。当waterfall组件同时包含header插槽和refresh组件时，iOS和Android平台在列排序方向上表现不一致。

从技术实现角度看，iOS平台默认从左到右排列，而Android平台在某些情况下会从右到左排列。这主要是由于底层渲染引擎的差异导致的。

建议的解决方案：

  1. 暂时移除header插槽，使用其他布局方式替代
  2. 或者统一通过CSS强制指定排列方向：
.waterfall-container {
  direction: ltr;
}
回到顶部