Onsen UI(2.0.3) + AngularJS1 + Monacaで開発しております。
一覧を3列で均等割り付け、折り返して、次の行へを件数がある分繰り返したいと思っています。
また、件数が多くなるため、ons-lazy-repeatを使用して負荷を減らしたいと思っておりますが、
上手くいきません。
方法がありますでしょうか。
そもそも無理なのでしょうか。
※ng-repeatでは、できていますが、負荷がかかってしまい、
件数が多いとアプリが強制終了してしまうため。
http://rfs.jp/sb/html/html-css-lab/flexbox_propaty.html
2017/08/10 ソースを追加しました。
ソースは以下の通りです。
HTML
1<ons-page id="search_list_main" ng-controller="searchListController as listSearch"> 2 <ons-toolbar fixed-style="true"> 3 <div class="left"> 4 </div> 5 <div class="center search_list-title-center">リスト</div> 6 <div class="right"></div> 7 </ons-toolbar> 8 <div> 9 <div class="search_list-item-div"> 10 <div class="search_list" id="search_list-item-id" style=""> 11 <div ons-lazy-repeat="listSearch.delegateSpot"> 12 {{item}} 13 </div> 14 </div> 15 </div> 16 </div> 17</ons-page>
JavaScript
1 //razy-repeatの部分のみ抽出 2 /* lazy_repeatの制御 */ 3 this.delegateSpot = { 4 createItemContent : function(index, oldContent) { 5 var listData = $scope.searchList[index]; 6 return ons._util.createElement( 7 "<div class='search_list-item' id='"+ listData.dataid + "'" 8 + " ng-click='clickData(" + listData.datano + ")'" 9 + " style='height:" + imageHeight + "px'>" 10 + " <img class='search_list-image' id='img-search-" + listData.datano + "' src='" + listData.image + "'>" 11 + " </div>" 12 ); 13 }, 14 countItems: function() { 15 return $scope.searchList.length; 16 }, 17 calculateItemHeight: function() { 18 var width = Math.round(window.innerWidth * 32 / 100) - 10; 19 20 return width; 21 } 22 };
CSS
1.search_list { 2 position: absolute; 3 z-index: -1; 4 overflow-x: none; 5 display : -webkit-flex; 6 display : flex; 7 justify-content: flex-start; 8 -webkit-justify-content: flex-start; 9 flex-wrap: wrap; 10 -webkit-flex-wrap: wrap; 11 align-items: stretch; 12 -webkit-align-items: stretch; 13 flex-direction: row; 14 -webkit-flex-direction: row; 15 width : 100%; 16} 17.search_list-item { 18 display : table-cell; 19 width : 32%; 20 height: 250px; 21 padding-bottom: 5px; 22 padding-right: 6px; 23} 24.search_list-item:nth-child(3n) { 25 padding-right: 0px; 26}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。