uni-app list嵌套waterfall组件 在Android下 left-gap right-gap column-gap属性无效
uni-app list嵌套waterfall组件 在Android下 left-gap right-gap column-gap属性无效
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
HBuilderX类型:正式
HBuilderX版本号:3.1.22
手机系统:Android
手机系统版本号:Android 7.0
手机厂商:vivo
手机机型:vivo x9plus
页面类型:nvue
打包方式:云端
示例代码:
```html
<template>
<list
fixFreezing="true"
id="page"
class="page"
:show-scrollbar="false"
:bounce="false">
<cell>
<view class="header">
<text>header</text>
</view>
</cell>
<cell>
<view :style="{ height: windowHeight + 'px' }">
<view class="nav"></view>
<waterfall
ref="list"
class="list"
fixFreezing="true"
:column-count="2"
:column-gap="12"
:left-gap="12"
:right-gap="12"
:show-scrollbar="false"
:bounce="false">
<cell v-for="(item, index) in 20" :key="index">
<view class="list-item">
<text>{{ index }}</text>
</view>
</cell>
</waterfall>
</view>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
windowHeight: 300
}
},
methods: {
setSpecialEffects(options) {
if (this.$refs['list'].setSpecialEffects) {
this.$refs['list'].setSpecialEffects(options);
}
},
},
onReady() {
this.windowHeight = uni.getSystemInfoSync().windowHeight;
this.setSpecialEffects({
id: 'page',
headerHeight: 200
})
}
}
</script>
<style scoped>
.page {
flex: 1;
overflow: hidden;
}
.header {
height: 200px;
background-color: #A0CFFF;
}
.nav {
height: 50px;
background-color: #FAB6B6;
}
.list {
flex: 1;
overflow: hidden;
}
.list-item {
height: 500rpx;
background-color: #A0CFFF;
margin: 12rpx 0;
}
</style>
操作步骤: 查看代码示例
预期结果: Android下与iOS一致
实际结果:
Android下left-gap、right-gap、column-gap属性无效
iOS下没问题
bug描述:
list嵌套waterfall组件,在Android下left-gap、right-gap、column-gap属性无效
Android效果图
iOS效果图
更多关于uni-app list嵌套waterfall组件 在Android下 left-gap right-gap column-gap属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
使用HX3.1.22 测试正常
更多关于uni-app list嵌套waterfall组件 在Android下 left-gap right-gap column-gap属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
我这边测试的Android下没有间隔,把最外层list删除又有间隔
回复 1***@qq.com: HX是3.1.22版本吗 我这边复现不了
回复 1***@qq.com: “nvueStyleCompiler” : “uni-app” 加一下这个配置
回复 DCloud_Android_ST: https://ask.dcloud.net.cn/article/38751参考
回复 DCloud_Android_ST: 解决了,谢谢
回复 DCloud_Android_ST: 补充下,安卓实际测试 waterfall 上如果没有class 属性,则gap显示异常,只要添加任意class 不设置任何样式,都能规避这个问题,nvue 3.2.9 版本
示例
这是一个已知的 Android 平台兼容性问题。在 nvue 页面中,当 waterfall 组件嵌套在 list 组件的 cell 内时,Android 端可能无法正确解析 left-gap、right-gap 和 column-gap 样式属性。
临时解决方案:
-
避免嵌套:如果布局允许,尝试将
waterfall组件移出list,作为独立组件使用。这是最直接的解决方式。 -
使用 CSS 边距模拟:在
waterfall内部的cell项上,通过 CSSmargin属性来间接控制间距。- 在
.list-item的样式中,使用margin-left和margin-right来模拟左右间距。 - 注意:这需要根据
column-count和column-gap计算每个项的左右边距,逻辑可能稍复杂,且可能影响首尾项的边距。
- 在
-
使用包装容器:在
waterfall外部包裹一个view,通过设置这个view的padding-left和padding-right来实现左右间距效果。但column-gap(列间距)仍可能无法通过此方式完美模拟。
代码调整示例(方案2思路):
<style scoped>
.list-item {
height: 500rpx;
background-color: #A0CFFF;
/* 假设列间距为12px,这里用margin-bottom模拟行间距 */
margin-bottom: 24rpx;
/* 通过左右margin模拟列间距,需根据列数动态计算 */
margin-left: 6rpx;
margin-right: 6rpx;
}
</style>


