问题代码如下：
<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
list组件设置flex-direction：row之后，设置的高度不生效
原文：https://blog.51cto.com/u_14772288/2765595