いつも参考にさせていただいております。
以下の内容(挙動)が仕様通りかどうかを確認させていただき、
問題がある場合はご指摘いただけないでしょうか。
下記のコードの通りons-lazy-repeatを用いてimg要素を並べ、
そのimg要素にCSSを適用し、横に3列並べて表示しております、
html
1<ons-page ng-controller="pictureControler" id="pictPage"> 2 <ons-toolbar> 3 <div class="right"> 4 <ons-toolbar-button> 5 <ons-icon icon="fa-camera-retro" fixed-width="false" style="font-size: 26px; vertical-align: -4px;"></ons-icon> 6 </ons-toolbar-button> 7 </div> 8 </ons-toolbar> 9 <section id="photos"> 10 <img src="{{item.src}}" ons-lazy-repeat="pictureDelegate" /> 11 </section> 12</ons-page>
css
1#photos { 2 /* Prevent vertical gaps */ 3 line-height: 0; 4 5 -webkit-column-count: 3; 6 -webkit-column-gap: 0px; 7 -moz-column-count: 3; 8 -moz-column-gap: 0px; 9 column-count: 3; 10 column-gap: 0px; 11 12 background-color: black; 13 padding:5px; 14 padding-right: 15px; 15 16} 17#photos img { 18 /* Just in case there are inline attributes */ 19 width: 100% !important; 20 height: auto !important; 21 margin-top: 10px; 22 margin-right: 5px; 23 margin-left: 5px; 24}
javascript
1ons.bootstrap() 2 .controller('pictureControler', ['$scope', '$http', '$q', function($scope, $http, $q){ 3 $scope.pictureDelegate = { 4 configureItemScope: function(index, itemScope) { 5 if (!itemScope.item) { 6 itemScope.item = { 7 src: 'images/xxx.jpg' 8 }; 9 } 10 }, 11 calculateItemHeight: function(index) { 12 return 91; 13 }, 14 countItems: function() { 15 return 200000; 16 }, 17 destroyItemScope: function(index, itemScope) { 18 itemScope.canceler.resolve(); 19 console.log("Destroyed item #" + index); 20 } 21 }; 22 }]);
このとき、画面に表示される部分のみが要素として扱われるというons-lazy-repeatの特性から3列がまとめて表示されたり消されたりする挙動を想定しておりましたが、
実際は下の通り最初の数スクロールは3列が並行してスクロールされますが、右2列のみが動いたり、無限に上下にスクロールされたりと想定していない挙動となりました。
コンソールログを確認したところ、
実際には想定していない動きをしているときは、自らスクロールしていないときもdestroyとcreateItemがひたすら繰り返されておりました。
これらの動きは仕様通りの動きでしょうか。
もし解決方法のヒント等ございましたらご教示いただけないでしょうか。
どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー