标签：flex direction list Common 设置 logo png
现象描述：
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/consumer/cn/doc/development/quickApp-References/quickapp-component-list
原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204429218218370032?fid=18
原作者：Mayism
标签：flex,direction,list,Common,设置,logo,png 来源： https://blog.51cto.com/u_14772288/2765595
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。