Joniczny: Uzyskaj obecnie widoczne elementy w zawartości jonów

Question

Mam w aplikacji długi, przewijany obszar ion-content, wypełniony przedmiotami przy użyciu collection-repeat.

Potrzebuję wiedzieć, które elementy są widoczne dla użytkownika.

Nie mogę użyć wartości $ionicScrollDelegate.getScrollPosition do obliczenia odpowiedzi, ponieważ każdy element ma inną wysokość (wysokość elementu jest obliczana dla pozycji).

Answer 1

Skończyło się na obliczaniu wysokości zsumowanych elementów i poprzez zapytanie o wartość translateY elementu .scroll, mogę sprawdzić, który element znajduje się w widocznej części zwoju.

Wymyśla koło, ale działa.

Kiedy załadować elementy wzywam ScrollManager.setItemHeights(heights) (heights jest tablicą wysokości elementu w pikselach), a aby uzyskać indeks aktualnie widocznej pozycji: 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 
    }; 
});