IScroll & ngInfiniteScroll

[msforest]

IScroll & ngInfiniteScroll

[msforest]

移动Web滚动性能优化: Passive event listeners

function isPassive() {
    var supportsPassiveOption = false;
    try {
        addEventListener("test", null, Object.defineProperty({}, 'passive', {
            get: function () {
                supportsPassiveOption = true;
            }
        }));
    } catch(e) {}
    return supportsPassiveOption;
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, isPassive() ? {
	capture: false,
	passive: false
} : false);

使用以上代码可以启用手机端页面的touchmove事件

[msforest]

ngInfiniteScroll

ngInfiniteScroll和IScroll都是实现滑动加载数据，一个是指令实现，一个是组件实现，指令实现的虽没有组件实现的各种特效，但是相比之下，在angular中使用IScroll有点重。下面了解一下ngInfiniteScroll的用法。

infiniteScroll：当滑动到底部的时候，可以指定函数实现数据再加载。

语法

<ANY infinite-scroll='{expression}'
     [infinite-scroll-distance='{number}']
     [infinite-scroll-disabled='{boolean}']
     [infinite-scroll-immediate-check='{boolean}']
     [infinite-scroll-listen-for-event='{string}']
     [infinite-scroll-container='{HTMLElement | [] | string}']
     [infinite-scroll-use-document-bottom='{boolean}']
     [infinite-scroll-parent]>
</ANY>

• infinite-scroll - {expression}：设置滑动底部加载数据的函数
• infinite-scroll-distance (optional) - {number}：设置距离底部还有多少像素可以执行infinite-scroll的表达式，默认为0；
• infinite-scroll-disabled (optional) - {boolean}：设置是否启用滑到底部加载数据，当值为true时，不再执行infinite-scroll的表达式；
• infinite-scroll-immediate-check (optional) - {boolean}：设置是否立即执行表达式，当scroll事件触发了infinite-scroll表达式就立即执行即使scroll事件还没有执行；
• infinite-scroll-listen-for-event (optional) - {string}：设置由于scroll变化导致的事件再次执行，比如当列表被过滤或被修改
• infinite-scroll-container (optional) - {HTMLElement | [] | string} - 设置滑动区域的根元素，参数可以被angular.element()解析或被document.querySelector()解析，若用字符串时请使用单引号。
• infinite-scroll-use-document-bottom (optional) - {boolean} - 为True,表示使用document的底部距离来判断位长，而不是使用设置区域的根元素的底部距离来判断位长。

模块加载

var myApp = angular.module('myApp', ['infinite-scroll']);

函数节流

angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250)

手动触发事件

使用infinite-scroll-listen-for-event定义触发事件

<div infinite-scroll="addMoreItems()" infinite-scroll-listen-for-event="list:filtered">
  [...]
</div>

当需要触发自定义的事件时，使用$scope.$emit('list:filtered')

指令用法

<div infinite-scroll="addMoreItems()">
  <div ng-repeat="item in items">Item number {{$index}}: {{$item}}</div>
</div>