之前项目中的列表是采用的IScroll，但是在使用IScroll有一个问题就是：当内容不足全屏的时候，是木有办法往下拉的，这样就达不到刷新的目的了。【这是本人工作中遇到的，具体例子具体分析，这里只作一个参考】
大致的例子是这样的：
<style> * { margin: 0; padding: 0; } html,body,.container { width: 100%; height: 100%; } .container>ul>li { padding: 15px 20px; text-align: center; border-bottom: 1px solid #ccc; } </style> <div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> </div> <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script> <script> var myScroll = null; function onLoad() { myScroll = new IScroll('container'); } window.addEventListener('DOMContentLoaded', onLoad, false); </script>
那么，既然超过一屏是可以刷新的，那我们就来逛逛代码吧。在github上搜索iscroll，打开第一个，找到src下面的core.js。
1. 思路
首先既然要下拉，肯定会触发touchstart、touchmove以及touchend事件。搜索touchmove，很好，在_initEvents中的注册了这个事件。
_initEvents: function (remove) { // ... // 这里省略若干代码 if ( utils.hasTouch && !this.options.disableTouch ) { eventType(this.wrapper, 'touchstart', this); eventType(target, 'touchmove', this); eventType(target, 'touchcancel', this); eventType(target, 'touchend', this); } // ... },
好吧，看到这里的时候，我表示懵了一下逼，这不就是个绑定事件么？this又是一个什么鬼，然后我去查了一下文档，发现了这么一个东西。文档地址
target.addEventListener(type, listener[, options]); target.addEventListener(type, listener[, useCapture]); target.addEventListener(type, listener[, useCapture, wantsUntrusted ]); // // Gecko/Mozilla only listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数
木有看错，listener是一个对象或者是一个函数。前提是这个对象实现了EventListener接口。我们接着往下看，发现了这么一个例子。
var Something = function(element) { // |this| is a newly created object this.name = 'Something Good'; this.handleEvent = function(event) { console.log(this.name); // 'Something Good', as this is bound to newly created object switch(event.type) { case 'click': // some code here... break; case 'dblclick': // some code here... break; } }; // Note that the listeners in this case are |this|, not this.handleEvent element.addEventListener('click', this, false); element.addEventListener('dblclick', this, false); // You can properly remove the listeners element.removeEventListener('click', this, false); element.removeEventListener('dblclick', this, false); } var s = new Something(document.body);
然后在去IScroll的源码去找，发现了同样的实现方式。在default文件夹中有一个handleEvent.js。
好了，这个梗先告一段落。还是继续看源码。在handleEvent.js中，有这么一段东西。
handleEvent: function (e) { switch ( e.type ) { case 'touchstart': case 'pointerdown': case 'MSPointerDown': case 'mousedown': this._start(e); break; case 'touchmove': case 'pointermove': case 'MSPointerMove': case 'mousemove': this._move(e); break; case 'touchend': case 'pointerup': case 'MSPointerUp': case 'mouseup': case 'touchcancel': case 'pointercancel': case 'MSPointerCancel': case 'mousecancel': this._end(e); break; // ... } } };
发现在start/move/end分别调用了内部方法_start/_move/_end方法。去看看这三个方法，看其中可能会引起不会滑动的点。
在_start方法中，看到这样的几行代码，会不会是直接返回了呢？分析分析：
if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) { return; } // ... var point = e.touches ? e.touches[0] : e, pos; this.initiated = utils.eventType[e.type]; this.moved = false; initiated属性在最开始肯定是没有的，而enabled默认是true，所以在最开始执行这个方法的时候是不会返回的，而是会给initiated这个属性设置当前的eventType值，这个值会在_move方法中用到。重点来看看_move方法。 if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) { return; }
首先来进行类型判断，因为在_start方法中已经定义了这个值，所以这里也不会返回。接着往下看：
if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) { return; }