Ionico: recupera gli elementi attualmente visibili nel contenuto di ioni

Question

Ho un'area lunga e scorrevole ion-content nella mia app, piena di elementi utilizzando uno collection-repeat.

Ho bisogno di sapere quali articoli sono visibili all'utente.

Non riesco a utilizzare $ionicScrollDelegate.getScrollPosition per calcolare la risposta, poiché ogni articolo ha un'altezza diversa (l'altezza dell'articolo viene calcolata per articolo).

Answer 1

Terminato il calcolo delle altezze summenzionate degli elementi e interrogando per il valore translateY dell'elemento .scroll, è possibile individuare quale elemento si trova nella parte visibile dello scroll.

Sta reinventando la ruota, ma funziona.

quando carico gli articoli, chiamo ScrollManager.setItemHeights(heights) (heights è la matrice delle altezze degli oggetti in pixel), e per ottenere l'indice dell'elemento attualmente visibile: 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 
    }; 
});