现象描述：
list组件设置flex-direction: row之后，设置的高度height: 100px不生效，整个list高度会变的异常大。
问题代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<
template
>
<!-- Only one root node is allowed in template. -->
<
div
class
=
"container"
>
<
list
style
=
"flex-direction:row;height: 100px;"
>
<
list-item
type
=
"list-item"
for
=
"listdata"
style
=
""
>
<
image
src
=
"{{$item}}"
></
image
>
</
list-item
>
</
list
>
</
div
>
</
template
>
<
style
>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 50px;
}
</
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，即可实现想要的效果，修改代码（红色部分）如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<
template
>
<!-- Only one root node is allowed in template. -->
<
div
class
=
"container"
>
<
div
>
<
list
style
=
"flex-direction:row;height: 100px;"
>
<
list-item
type
=
"list-item"
for
=
"listdata"
style
=
""
>
<
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;
}
</
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