景象形容：
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/...
原文链接：https://developer.huawei.com/...
原作者：Mayism