list组件设置flex-direction：row之后，设置的高度不生效

现象描述：

list组件设置flex-direction: row之后，设置的高度height: 100px不生效，整个list高度会变的异常大。

问题代码如下：

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
            <list style="background-color: red;flex-direction:row;height: 100px;">
                <list-item type="list-item" for="listdata" style="background-color: green;">
                    <image src="https://juejin.cn/post/{{$item}}"></image>
                </list-item>
            </list>
    </div>
</template>
<style>
    .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .title {
        font-size: 50px;
        background-color: blue;
    }
</style>
 
<script>
    module.exports = {
        data: {
            componentData: {},
            listdata: ['/Common/logo.png', '/Common/logo.png', '/Common/logo.png']
        },
        onInit() {
        },
    }
</script>
复制代码

问题截图如下所示：

问题分析：

快应用中，当根节点div直接嵌套list组件时，根节点div设置flex-direction: column和list设置 flex-direction: row 时，list组件计大小会被多次执行，最终传进来的值与代码中设置的值不一致。

解决方案：

可采用以下写法，list上再包一层div，即可实现想要的效果，修改代码（红色部分）如下：

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
        <div>
            <list style="background-color: red;flex-direction:row;height: 100px;">
                <list-item type="list-item" for="listdata" style="background-color: green;">
                    <image src="https://juejin.cn/post/{{$item}}"></image>
                </list-item>
            </list>
        </div>
    </div>
</template>
<style>
    .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .title {
        font-size: 50px;
        background-color: blue;
    }
</style>
 
<script>
    module.exports = {
        data: {
            componentData: {},
            listdata: ['/Common/logo.png', '/Common/logo.png', '/Common/logo.png']
        },
        onInit() {
        },
    }
</script>
复制代码

修改后效果图如下所示：

欲了解更多详情，请参见：

快应用list组件介绍：developer.huawei.com/consumer/cn…

原文链接：developer.huawei.com/consumer/cn…

原作者：Mayism