आयनिक: वर्तमान में आयन-सामग्री

Question

में दृश्यमान आइटम प्राप्त करें मेरे पास मेरे ऐप में एक लंबा, स्क्रोल करने योग्य ion-content क्षेत्र है, जो collection-repeat का उपयोग करके आइटम से भरा हुआ है।

मुझे यह जानने की जरूरत है कि उपयोगकर्ता के लिए कौन सी चीजें दिखाई दे रही हैं।

मैं उत्तर की गणना करने के लिए $ionicScrollDelegate.getScrollPosition का उपयोग नहीं कर सकता, क्योंकि प्रत्येक आइटम की एक अलग ऊंचाई होती है (आइटम ऊंचाई प्रति आइटम की गणना की जाती है)।

Answer 1

तत्वों के स्वयं को ऊपरी ऊंचाइयों की गणना करने और तत्व के मान के लिए पूछताछ करके, मैं यह पता लगा सकता हूं कि स्क्रॉल के दृश्य भाग में कौन सी वस्तु है।

यह पहिया को फिर से शुरू कर रहा है, लेकिन काम करता है।

जब मैं आइटम लोड, मैं फोन 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 
    }; 
});