现象描述:
list组件设置flex-direction: row以后,设置的高度height: 100px不生效,整个list高度会变的异常大。node
问题代码以下:app
<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>
问题截图以下所示:flex
问题分析:
快应用中,当根节点div直接嵌套list组件时,根节点div设置flex-direction: column和list设置 flex-direction: row 时,list组件计大小会被屡次执行,最终传进来的值与代码中设置的值不一致。ui
解决方案:
可采用如下写法,list上再包一层div,便可实现想要的效果,修改代码(红色部分)以下:spa
<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>
修改后效果图以下所示:code
欲了解更多详情,请参见:component
快应用list组件介绍:https://developer.huawei.com/...ip
原文连接:https://developer.huawei.com/...
原做者:Mayismrem