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效果图
Android下效果图
iOS效果图


更多关于uni-app list嵌套waterfall组件 在Android下 left-gap right-gap column-gap属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

使用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版本吗 我这边复现不了

回复 DCloud_Android_ST: 我上传了一个示例

回复 1***@qq.com: “nvueStyleCompiler” : “uni-app” 加一下这个配置

回复 DCloud_Android_ST: 解决了,谢谢

回复 DCloud_Android_ST: 补充下,安卓实际测试 waterfall 上如果没有class 属性,则gap显示异常,只要添加任意class 不设置任何样式,都能规避这个问题,nvue 3.2.9 版本

示例

这是一个已知的 Android 平台兼容性问题。在 nvue 页面中,当 waterfall 组件嵌套在 list 组件的 cell 内时,Android 端可能无法正确解析 left-gapright-gapcolumn-gap 样式属性。

临时解决方案:

  1. 避免嵌套:如果布局允许,尝试将 waterfall 组件移出 list,作为独立组件使用。这是最直接的解决方式。

  2. 使用 CSS 边距模拟:在 waterfall 内部的 cell 项上,通过 CSS margin 属性来间接控制间距。

    • .list-item 的样式中,使用 margin-leftmargin-right 来模拟左右间距。
    • 注意:这需要根据 column-countcolumn-gap 计算每个项的左右边距,逻辑可能稍复杂,且可能影响首尾项的边距。
  3. 使用包装容器:在 waterfall 外部包裹一个 view,通过设置这个 viewpadding-leftpadding-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>
回到顶部