İyonik: İyon içeriğindeki şu anda görünür öğeleri edinin

Question

Uygulamamda collection-repeat kullanarak öğelerle dolu uzun, kaydırılabilir bir ion-content alan var.

Kullanıcıya hangi öğelerin göründüğünü bilmem gerekiyor.

Yanıtı hesaplamak için $ionicScrollDelegate.getScrollPosition numarasını kullanamıyorum çünkü her öğe farklı bir yüksekliğe sahiptir (öğe başına öğe yüksekliği hesaplanır).

Answer 1

Toplanan yüksekliklerin öğelerin kendim hesaplanmasıyla sona erdi ve .scroll öğesinin translateY değeri için sorgulama yaparak, kaydırmanın görünen kısmında hangi öğenin bulunduğunu bulabilirim.

Tekerleği yeniden icat ediyor ama işe yarıyor.

i öğeleri yüklediğinizde, ben ScrollManager.setItemHeights(heights) (heights piksel öğesi yükseklikleri dizidir) diyoruz ve şu anda görünür öğenin dizini almak için: ScrollManager.getVisibleItemIndex()

angular.module("services") 
.service('ScrollManager', function() { 
    var getTranslateY, getVisibleItemIndex, setItemHeights, summedHeights; 
    summedHeights = null; 
    setItemHeights = function(heights) { 
    var height, sum, _i, _len; 
    summedHeights = [0]; 
    sum = 0; 
    for (_i = 0, _len = heights.length; _i < _len; _i++) { 
     height = heights[_i]; 
     sum += height; 
     summedHeights.push(sum); 
    } 
    }; 

    // returns the style translateY of the .scroll element, in pixels 
    getTranslateY = function() { 
    return Number(document.querySelector('.scroll').style.transform.match(/,\s*(-?\d+\.?\d*)\s*/)[1]); 
    }; 

    getVisibleItemIndex = function() { 
    var i, y; 
    y = -getTranslateY(); 
    i = 0; 
    while (summedHeights[i] < y) { 
     i++; 
    } 
    return i; 
    }; 

    return { 
    setItemHeights: setItemHeights, 
    getVisibleItemIndex: getVisibleItemIndex 
    }; 
});