Ionic: Nhận các mục hiện có trong nội dung ion

Question

Tôi có một khu vực dài, có thể cuộn ion-content trong ứng dụng của tôi, chứa đầy các mục bằng cách sử dụng collection-repeat.

Tôi cần biết những mục nào hiển thị với người dùng.

Tôi không thể sử dụng $ionicScrollDelegate.getScrollPosition để tính toán câu trả lời, vì mỗi mục có chiều cao khác nhau (chiều cao mục được tính cho mỗi mục).

Answer 1

Kết thúc tính toán tổng chiều cao bản thân của các phần tử và bằng cách truy vấn giá trị translateY của phần tử .scroll, tôi có thể tìm hiểu mục nào nằm trong phần hiển thị của cuộn.

Nó phát minh lại bánh xe nhưng hoạt động.

Khi tôi tải các mục, tôi gọi ScrollManager.setItemHeights(heights) (heights là mảng độ cao mục bằng pixel), và để có được chỉ số của mặt hàng đó hiện nay có thể nhìn thấy: 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 
    }; 
});