list组件设置flex-direction：row之后，设置的高度不生效

2024-04-08 16:52:38

现象描述：

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>

<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，即可实现想要的效果，修改代码（红色部分）如下：

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>

<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之后，设置的高度不生效相关推荐

mui拓展：flex布局：如何设置x轴横向隐藏，而又往左排列优先
flex布局:如何设置x轴横向隐藏使用了mui框架的组件,发现只能居中显示,不能靠左排列,特意修改了一下代码,实现了内容过少,居左排列:内容溢出,可左右滑动的功能可以单独分离代码,适用于非框架开发 ...
vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
问题记录 vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称官方文档及示例 DragRoute相关API API中没有任何方法让我 ...
日历php 价格库存,jQuery web 组件后台日历价格、库存设置的代码
/* * yagizaDate 1.0 * * Yagiza * Copyright 2016, MIT License * * IE 8+, Chrome, fireFox */ // * 字段说明 ...
父元素flex:1,子元素设置高度百分百无效
有的时候我们写页面布局会出现,父级的高度是通过flex为1来设置的,然后子级想保持和父级一样的高度,很多人都会想到设置高度百分百.不过由于这里的父元素是缺省的,所以你设置了高度百分百是无效的.我之前是 ...
Python中Button按钮组件常用的属性及参数设置
Python中Button按钮组件常用的属性及参数设置本篇文章中小编给大家介绍Button按钮组件的相关常用的属性以及参数的设置. 一. 常用属性使用语法变量=Button(父容器(根窗口),参数 ...
Flutter组件（Padding，Row，Column，Expanded）
Flutter组件 Padding组件 Row和Column组件 Row(水平展示) Column(垂直展示) Expanded 示例演示 Padding组件 Flutter 中很多 Widget 是 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...
LoadRunner中Action的迭代次数的设置和运行场景中设置
LoadRunner中Action的迭代次数的设置和运行场景中设置 LoadRunner是怎么重复迭代和怎么增加并发运行的呢? 另外,在参数化时,对于一次压力测试中均只能用一次的资源应该怎么参数化呢? ...
idea html设置字体大小,intellij idea设置(字体大小、背景)
1. 配置信息说明 Intellij Idea: 2017.2.5 2.具体设置 <1> 设置主题背景.字体大小 File---->Settings----->Appearan ...

最新文章

热门文章