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

前端之家收集整理的这篇文章主要介绍了angularjs – Ionic:获取离子内容中当前可见的项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的应用程序中有一个长的,可滚动的离子内容区域,使用集合重复填充项目.

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

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

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

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

当我加载项目时,我调用ScrollManager.setItemHeights(高度)(高度是项目高度的数组,以像素为单位),并获取当前可见项目的索引:ScrollManager.getVisibleItemIndex()

  1. angular.module("services")
  2. .service('ScrollManager',function() {
  3. var getTranslateY,getVisibleItemIndex,setItemHeights,summedHeights;
  4. summedHeights = null;
  5. setItemHeights = function(heights) {
  6. var height,sum,_i,_len;
  7. summedHeights = [0];
  8. sum = 0;
  9. for (_i = 0,_len = heights.length; _i < _len; _i++) {
  10. height = heights[_i];
  11. sum += height;
  12. summedHeights.push(sum);
  13. }
  14. };
  15.  
  16. // returns the style translateY of the .scroll element,in pixels
  17. getTranslateY = function() {
  18. return Number(document.querySelector('.scroll').style.transform.match(/,\s*(-?\d+\.?\d*)\s*/)[1]);
  19. };
  20.  
  21. getVisibleItemIndex = function() {
  22. var i,y;
  23. y = -getTranslateY();
  24. i = 0;
  25. while (summedHeights[i] < y) {
  26. i++;
  27. }
  28. return i;
  29. };
  30.  
  31. return {
  32. setItemHeights: setItemHeights,getVisibleItemIndex: getVisibleItemIndex
  33. };
  34. });

猜你在找的Angularjs相关文章