离子：获取离子含量中当前可见的项目

Yossi Shasho 发表于 Dev

优西沙肖

我的ion-content应用程序中有一个很长的可滚动区域，使用填充了许多项collection-repeat。

我需要知道哪些项目对用户可见。

我无法使用$ionicScrollDelegate.getScrollPosition来计算答案，因为每个项目的高度都不同（每个项目的项目高度都是计算得出的）。

优西沙肖

最终自己计算了元素的总高度，然后通过查询元素的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
  };
});