Ионные: получить видимые в настоящее время элементы в ионном содержимом

Question

У меня есть длинная прокручиваемая область ion-content в моем приложении, заполненная элементами с использованием collection-repeat.

Мне нужно знать, какие элементы видны пользователю.

Я не могу использовать $ionicScrollDelegate.getScrollPosition для вычисления ответа, потому что каждый элемент имеет разную высоту (высота элемента вычисляется за элемент).

Answer 1

Завершено вычисление суммированных высот самих элементов и путем запроса значения translateY элемента .scroll, я могу узнать, какой элемент находится в видимой части прокрутки.

Это изобретает колесо, но работает.

Когда я загрузить детали, я называть ScrollManager.setItemHeights(heights) (heights это массив элементов высоты в пикселях), и, чтобы получить индекс текущего видимого элемента: 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 
    }; 
});