温泉UI - 使用两个栏项目

Question

懒重复我有这个模板

 <ons-row> 
     <ons-col width="22%" class="card" ons-lazy-repeat="SimilarDelegate"><!--ng-repeat="item in similarResults"--> 
      <img ng-src="{{item .thumb}}" class="thumbnail" ng-click="showQuickInfo(item .id)" err-src="img/noimage.jpg" /> 
      <ons-row> 
       <ons-col width="75%">{{item .name}}<br><ons-icon icon="md-star" size="22px"></ons-icon> {{item .rating}}</ons-col> 
      </ons-row> 
     </ons-col> 
    </ons-row> 

使用ng-repeat我的项目在两个排渲染（每排有两个项目）。但是，我的名单可以达到16000件，而ng-repeat'即使有300件物品也不算好。我改变了代码使用ons-lazy-repeat和加载性能现在更好！但是现在每行只有一个项目而不是两个。我一直在试图让它每行两个项目，但什么都没有。有没有办法让ons-lazy-repeat完成？

谢谢

Answer 1

ons-lazy-repeat只适用于垂直重复。

虽然ng-repeat只是放更多的项目，所以基本上它加载的一切，懒惰重复有最大数量的项目，它显示。因此，如果向下滚动1000个项目，则同时DOM中只有100个项目。因此，记住DOM元素如何存在的更复杂的东西会变得复杂。因此ons-lazy-repeat只支持垂直重复。这就是为什么你可能已经注意到它需要知道重复元素的高度。所以基本上你不能按照你所描述的方式重复项目。但是，仍然有相对简单的方法来获得您想要的结果。

这里有2个解决方案，来我的脑海：

• 最简单的办法就是有ons-lazy-repeat指令，其中将包含这些2项的元素。那么一切都会好的。这应该如何使用ons-lazy-repeat。

• 第二个是一种哈克，我不会推荐它，但有些人喜欢这些东西。基本上你应该可以通过给它虚假的值和做一些CSS黑客来欺骗ons-lazy-repeat。

  例如让我们说，你是

  .item { height: 100px; width: 50%; } 
  .item:nth-child(even) { margin-top: -100px; margin-left: 50%; } 
  

  而且你的高度函数可以返回50，而不是100。也有可能这些样式中的一些可能需要!important，因为lazy-repeat可能会添加一些内联样式。

  CSS黑客再次盛行。

但我仍然会推荐第一种解决方案。