angularjs – Ionic：获取离子内容中当前可见的项目

我的应用程序中有一个长的,可滚动的离子内容区域,使用集合重复填充项目.

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

我不能使用$ionicScrollDelegate.getScrollPosition来计算答案,因为每个项目都有不同的高度(项目高度是按项目计算的).

最后我自己计算了元素的总高度,并通过查询.scroll元素的translateY值,我可以找出滚动的可见部分中的哪个项目.

它正在重新发明轮子,但是有效.

当我加载项目时,我调用ScrollManager.setItemHeights(高度)(高度是项目高度的数组,以像素为单位),并获取当前可见项目的索引：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
  };
});

原文地址：https://www.jb51.cc/angularjs/141200.html