如何使用Onsen-UI制作垂直列表？

Question

是否可以使用onsen-ui制作垂直列表？目前列表只在一个列中 - 我希望他们在使用平板电脑时每行 4 列（项目）并且在移动设备上是单列。如何实现？

Answer 1

您可以使用网格组件制作两列：

  <ons-row>
    <ons-col>
      <ons-list>
        <ons-list-item ng-repeat="item in [1,2,3, 4, 5, 6, 7, 8, 9, 10]">
          {{ item }}
        </ons-list-item>
      </ons-list>
    </ons-col>
    <ons-col>
      <ons-list>
        <ons-list-item ng-repeat="item in [11,12,13, 14, 15, 16, 17, 18, 19, 20]">
          {{ item }}
        </ons-list-item>
      </ons-list>
    </ons-col>
  </ons-row>

请看这个例子： http://codepen.io/argelius/pen/raPpaY

如何使用Onsen-UI制作垂直列表？

How to make vertical list using Onsen-UI?

onsen-ui