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="{{$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