weex的 list组件如何实现内容自动换行

Question

`
<list class="list">
<cell class="list-item" for="(vo,key) in data" :key="key">{{vo.name}}</cell>
</list>

`
这个 list 里面的 cell 如何三个换行？？

我在list的css设置 flex-direction: row;flex-wrap: wrap; 结果是一个cell一个屏幕的，如果list换成div 就正常，但是这里必须使用list上拉加载。

Answer 1

list 是一种单列表页面展示形式。要实现你现在的需求，可以考虑两种方案。

1）使用 list
list 里面一个cell 是占据一列的。你可以对你的数据进行封装，变成一个三列的二维数组。然后在 cell 中渲染出三个数据。

<list>
    <cell v-for="cell in list">
        <div v-for="item in cell"></div>
    </cell>
</list>

这样就可以满足三列展示，并使用 refresh 组件。而且数组分割的列数是可以通过 js 动态控制的。

2）使用 waterfall 组件
多列展示其实应该是 waterfall 组件的职责。你现在的需求只是一个 cell 高度一致的 waterfall