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

阅读 260
评论 2019-12-02 提问
    1 个回答
    ssruoyan
    • 1.4k

    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

    评论 赞赏 2019-12-02
      撰写回答

      登录后参与交流、获取后续更新提醒