Symptom Description:

After setting flex-direction: row for the list component, the height: 100px does not take effect, and the whole list will become unusually large.

The problem code is as follows:

<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>Copy the code

The screenshot of the problem is as follows:

Problem analysis:

In quick applications, when the root div nested the list component directly, and the root div set flex-direction: column and list set flex-direction: row, the list component was evaluated multiple times, and the values passed in were inconsistent with the values set in the code.

Solution:

Add a div layer to the list to achieve the desired effect. Modify the code (red) as follows:

<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>Copy the code

The modified renderings are as follows:

For more details, see:

Fast application list component is introduced: developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism