现象描述：

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="{{$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="{{$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 组件介绍： https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-list

原文链接： https://developer.huawei.com/consumer/cn/forum/topic/0204429218218370032?fid=18

原作者：Mayism