IScroll & ngInfiniteScroll

[msforest]

1. IScroll

2. ngInfiniteScroll

iscroll用法

推荐使用的html格式

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

js初始化iscroll对象，有三种方式如下：

• 使用id选择器

  <script type="text/javascript">
  var myScroll = new IScroll('#wrapper');
  </script>

• 使用dom对象

  var wrapper = document.getElementById('wrapper');
  var myScroll = new IScroll(wrapper);

• 使用类选择器

  var myScroll = new IScroll('.wrapper');

  iscroll可选参数配置

  初始化时给第二个参数传递一个对象

  var myScroll = new IScroll('#wrapper', {
  mouseWheel: true,
  scrollbars: true
  });

  1. mouseWheel:表示是否支持滑轮滚动
  2. scrollbars:表示是否显示滚动条
  3. bounce:表示是否反弹
  4. click:表示是否支持鼠标点击
  5. hScroll：是否支持水平滚动
  6. vScroll：是否支持垂直滚动
  7. hScrollbar：是否显示水平滚动条
  8. vScrollbar：是否显示垂直滚动条
  9. momentum: 是否惯性拖动
  10. fadeScrollbars：是否有淡入淡出效果
  11. interactiveScrollbars: 滚动条是否可拖拽
  12. shrinkScrollbars：滚动条是否收缩,有效值‘clip’、‘scale’
  13. probeType： 1滚动不繁忙的时候触发；2滚动时每隔一定时间触发；3每滚动一像素触发一次（使用 iscroll-probe.js）
  14. keyBindings：键盘绑定参数 {pageUp:33,pageDown:34,end:35,home:36,left:37,up: 38,right:39,down:40}

iscroll事件

通过scroll的on方法来注册事件

myScroll = new IScroll('#wrapper'); myScroll.on('scrollEnd', doSomething);

• beforeScrollStart：用户触摸屏幕scroll初始化之前
• scrollCancel：scroll初始化但是还没有执行
• scrollStart：scroll初始化
• scroll：内容处于滑动中
• scrollEnd：滑动结束
• flick：轻击屏幕左/右
• zoomStart：缩放开始
• zoomEnd：缩放结束

[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>