芜湖老码农
芜湖老码农
  • 发布:2021-12-09 02:38
  • 更新:2021-12-09 02:38
  • 阅读:400

【报Bug】app中,list-cell的margin渲染错误以及justify-content异常。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 华为

手机机型: 荣耀

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

四组相同结构,上面2个是list-cell,下面2个是view-view,显示不正常的有:

view中都是正常的。

1,在listjustify-content: flex-start;时,也就是默认值,cell的margin左右全放到右边了,上下不显示;

2,在listjustify-content: flex-end;时,子元素不是从底部开始(要是说list必须从顶部开始也能接受),cell的margin左右显示,上下不显示,没明白为什么是justify-content影响子元素的左右排列;

3,在justify-content: flex-start;时或默认不填时,align-items无论填什么都等于同于align-items: flex-start;


<template>  
    <view class="content">  
        <list class="list1">  
            <cell class="cell" v-for="i in 2">  
                <text class="text">list-cell flex-start</text>  
            </cell>  
        </list>  
        <list class="list2">  
            <cell class="cell" v-for="i in 2">  
                <text class="text">list-cell flex-end</text>  
            </cell>  
        </list>  
        <view class="view1">  
            <view class="cell" v-for="j in 2">  
                <text class="text">view-view flex-start</text>  
            </view>  
        </view>  
        <view class="view2">  
            <view class="cell" v-for="j in 2">  
                <text class="text">view-view flex-end</text>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {}  
        }  
    }  
</script>  

<style>  
    .content {  
        flex: 1;  
    }  

    .list {  
        flex: 1;  
        background-color: #55aa7f;  
    }  

    .list1 {  
        flex: 1;  
        flex-direction: column;  
        background-color: #55aa7f;  
        justify-content: flex-start;  
        /* align-items: flex-start; */  
        /* align-items: flex-end; */  
        /* align-items: center; */  
    }  

    .list2 {  
        flex: 1;  
        flex-direction: column;  
        background-color: #00aaff;  
        justify-content: flex-end;  
        /* align-items: flex-end; */  
        /* align-items: flex-start; */  
        /* align-items: center; */  
    }  

    .view1 {  
        flex: 1;  
        background-color: #55557f;  
    }  

    .view2 {  
        flex: 1;  
        background-color: #550000;  
        justify-content: flex-end;  
    }  

    .cell {  
        background-color: #2C405A;  
        margin: 10px;  
        padding: 5px;  
        border-radius: 10px;  
    }  

    .text {  
        background-color: #00007f;  
        padding: 10px;  
        color: #aaa;  
        font-size: 12px;  
    }  
</style>  

操作步骤:

以上代码直接运行就能看到效果

预期结果:

list-cell显示能按view那样。

实际结果:

如上所描述。

bug描述:

https://7463-tcb-vuys7nfzb9494c-3dnzd0ad4efaa-1308621216.tcb.qcloud.la/temp/微信图片_20211209023348.jpg

2021-12-09 02:38 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复