前言
初学iscroll这个控件，给我的一个感觉还是蛮不错的。
什么是iScroll：是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本
- iscroll.js 通用版 包含了大部分公共特性
- iscroll-lite.js 缩减版 削减了一些功能特性，例如：滚动条，鼠标滚轮等等
- iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。
- iscroll-zoom.js 滚动缩放版
- iscroll-infinite.js 无限制版
使用
代码思路：利用监听滚动条的scroll事件，判断下拉或者上拉的距离，做上触发距离标记，当scrollEnd事件触发时，执行数据加载
这里自己要去引用<script src="js/iscroll-probe.js"></script>
html整个贴图代码
<!DOCTYPE html>
<html><head> <title>pull to refresh</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <script src="js/iscroll-probe.js"></script></head><style>
body{ overflow: :hidden; } body,ul{ padding: 0; margin: 0; } .main { position: relative; width: 100%; height: 100%; } .main .warpper{ position: absolute; width: 100%; } .scroller-pullDown, .scroller-pullUp { width: 100%; height: 30px; padding: 10px 0; text-align: center; } .dropdown-list { padding: 0; margin: 0; } .dropdown-list li { width: 100%; background: #ddd; line-height: 45px; text-align: center; color: #FFF; border-bottom: 1px solid #FFF; }</style><script> //模拟数据 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19 , 20]; function getContents() { var li = ""; for (var i = 0; i < arr.length; i++) { li += "<li>Item" + arr[i] + "</li>"; } return li; } function appendContent(content) { var ul = document.getElementById('Content'); ul.innerHTML = ul.innerHTML + content; } //返回文档中匹配指定 CSS 选择器的一个元素 var pullDown = document.querySelector("#PullDown"); var pullUp = document.querySelector("#PullUp"); var isPulled = false; // 拉动标记 window.onload = function(){ document.body.style.height = Math.max(document.documentElement.clientHeight,window.innerHeight||0)+'px'; appendContent(getContents()); //实例IScroll对象 var myScroll = new IScroll('#MyScroller', { //probeType： // 1 滚动不繁忙的时候触发 // 2 滚动时每隔一定时间触发 // 3 每滚动一像素触发一次 probeType: 3, //是否监听鼠标滚轮事件 mouseWheel: true, //是否显示默认滚动条 scrollbars: true, //是否屏蔽默认事件 preventDefault: false, //是否渐隐滚动条，关掉可以加速 fadeScrollbars: true }); myScroll.on('scroll',function(){ var height = this.y; var bottomHeight = this.maxScrollY - height; //控制下拉显示 console.log('height',height); if(height>=60){ PullDown.style.display = "block"; isPulled = true; return; }else if(height < 60 && height >= 0){ PullDown.style.display = "none"; return; } //控制上拉显示 if(bottomHeight >= 60){ PullUp.style.display = "block"; isPulled = true; return; }else if (bottomHeight < 60 && bottomHeight >= 0) { PullUp.style.display = "none"; return; } }) myScroll.on('scrollEnd', function() { // 滚动结束 if (isPulled) { // 如果达到触发条件，则执行加载 isPulled = false; appendContent(getContents()); myScroll.refresh(); } }); }</script><body> <div id="MyScroller" class="main"> <div class="warpper"> <div id="PullDown" class="scroller-pullDown" style="display: none;"> <img style="width: 20px; height: 20px;" src="img/HBuilder.png" /> <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span> </div> <ul id="Content" class="dropdown-list"> </ul> <div id="PullUp" class="scroller-pullUp" style="display: none;"> <img style="width: 20px; height: 20px;" src="img/HBuilder.png" /> <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span> </div> </div> </div></body></html>
参考博客：http://imziv.com/blog/article/read.htm?id=73