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

`
<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上拉加载。

Screenshot_2019-12-02-09-59-17-496_io.dcloud.HBui.jpg

阅读 3.4k
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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进