溫泉UI - 使用兩個欄項目

懶重複我有這個模板溫泉UI - 使用兩個欄項目

 <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完成？

謝謝

來源

2016-04-28 JcDenton86

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黑客再次盛行。

但我仍然會推薦第一種解決方案。

來源

2016-04-28 10:15:37

感謝您的回答。你的第一個解決方案就是我一直試圖做的事，但沒有成功。我想它需要更多的發展，我很好做.. – JcDenton86

溫泉UI - 使用兩個欄項目

回答

相關問題