diff --git a/demo/index.html b/demo/index.html index 73fc489..122d924 100644 --- a/demo/index.html +++ b/demo/index.html @@ -83,6 +83,7 @@ } $scope.$watch('numItems', function(numItems) { + $scope.data = []; $scope.data = createData(numItems); }); $scope.numItems = 1000; diff --git a/dist/tileview.js b/dist/tileview.js index daf56c3..5ad4481 100644 --- a/dist/tileview.js +++ b/dist/tileview.js @@ -183,14 +183,21 @@ } } function updateRow(el, rowIndex, digest) { - for (var i = 0; i < el.children().length; ++i) { - updateItem(el.children().eq(i), rowIndex * itemsPerRow + i, digest); + var ch = el.children(); + for (var i = 0; i < ch.length; ++i) { + updateItem(ch.eq(i), rowIndex * itemsPerRow + i, digest); + } + var translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0); + //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`); + if (scope.options.alignHorizontal) { + el.css('transform', "translate3d(" + translate + "px, 0px, 0)"); + } + else { + el.css('transform', "translate3d(0px, " + translate + "px, 0)"); } - var translate = scope.options.alignHorizontal ? 'translateX' : 'translateY'; - el.css('transform', translate + '(' + Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0) + 'px)'); } function addRow() { - var row = angular.element('<div></div>'); + var row = angular.element('<div class="td-row"></div>'); row.css('position', 'absolute'); itemContainer.append(row); return row; @@ -330,7 +337,7 @@ // scrolling ends: scrollEndTimeout = undefined; scope.$parent.$broadcast('td.tileview.scrollEnd'); - }, scope.options.afterScrollDelay, true); + }, scope.options.afterScrollDelay, false); } } var debounceTimeout, scrollEndTimeout; diff --git a/src/tileview.ts b/src/tileview.ts index 8656bdc..8cc72ec 100644 --- a/src/tileview.ts +++ b/src/tileview.ts @@ -213,15 +213,21 @@ declare const angular: any; } function updateRow(el, rowIndex, digest) { - for (let i = 0; i < el.children().length; ++i) { - updateItem(el.children().eq(i), rowIndex * itemsPerRow + i, digest); + const ch = el.children(); + for (let i = 0; i < ch.length; ++i) { + updateItem(ch.eq(i), rowIndex * itemsPerRow + i, digest); + } + const translate = Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0); + //el.css('transform', `${translate}(${Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0)}px), translateZ(${rowIndex})`); + if (scope.options.alignHorizontal) { + el.css('transform', `translate3d(${translate}px, 0px, 0)`); + } else { + el.css('transform', `translate3d(0px, ${translate}px, 0)`); } - const translate = scope.options.alignHorizontal ? 'translateX' : 'translateY'; - el.css('transform', translate + '(' + Math.max(rowIndex * scope.options.tileSize[sizeDimension], 0) + 'px)') } function addRow() { - const row = angular.element('<div></div>'); + const row = angular.element('<div class="td-row"></div>'); row.css('position', 'absolute'); itemContainer.append(row); return row; @@ -376,7 +382,7 @@ declare const angular: any; // scrolling ends: scrollEndTimeout = undefined; scope.$parent.$broadcast('td.tileview.scrollEnd'); - }, scope.options.afterScrollDelay, true); + }, scope.options.afterScrollDelay, false); } }