現象描述：
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