Ionic: Holen Sie sich die derzeit sichtbaren Elemente in Ionen-Inhalt

Question

Ich habe eine lange, scrollbare ion-content Bereich in meiner App, mit Artikeln mit einem collection-repeat gefüllt.

Ich muss wissen, welche Elemente für den Benutzer sichtbar sind.

Ich kann nicht die $ionicScrollDelegate.getScrollPosition verwenden, um die Antwort zu berechnen, da jedes Element eine andere Höhe hat (Artikelhöhe wird pro Artikel berechnet).

Answer 1

Beendet die Berechnung der summierten Höhen selbst der Elemente, und durch Abfragen der translateY Wert des Elements .scroll kann ich herausfinden, welches Element im sichtbaren Teil der Bildlauf ist.

Es erfindet das Rad neu, funktioniert aber.

Wenn i die Elemente zu laden, i nennen ScrollManager.setItemHeights(heights) (heights ist die Anordnung von Einzelteil Höhen in Pixel), und den Index des aktuell sichtbaren Element zu erhalten: 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 
    }; 
});