糊一笑通过本文主要向大家介绍了javascript,iscroll等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
之前项目中的列表是采用的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 id="container" class="container">
<ul class="scroller">
<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':