我的应用程序中有一个长的,可滚动的离子内容区域,使用集合重复填充项目.
我需要知道哪些项目对用户可见.
我不能使用$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
- };
- });