iscroll.js 是一款移动端框架， 相信做移动的同学都有接触吧， 哈哈 ，
下面分享一下用法 ， 首先再你的head里引入iscroll.js 路径需要自行修改
官网：http://cubiq.org/iscroll-4
1 | <script src="iscroll.js"></script> |
好吧， 引入以后就该来点实际的啦 ，
首先你的搭建你的HTML 结构 ： 如以下代码 ， 运动的对象就是你ID 为wrapper下的第一个子元素 ,没办法谁叫你用的框架呢 。 当然同学们也可以自行扩展
1 2 3 4 5 6 | <div id="wrapper"> <ul> <li></li> ..... </ul> </div> |
引完js ， 搭建好结构以后 然后再贴入如下脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll('wrapper', { useTransition: true, topOffset: pullDownOffset, onRefresh: function () { if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多'; } }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开刷新'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新'; this.minScrollY = -pullDownOffset; } else if (this.y < (this.maxScrollY - 10) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 10) && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多'; this.maxScrollY = pullUpOffset; } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中'; pullDownAction(); // Execute custom function (ajax call?) } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中'; pullUpAction(); // Execute custom function (ajax call?) } } }); setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);准备就绪后 就应该执行了 function pullDownAction () { // 下拉刷新 window.location.reload();}var i = 2; //初始化页码为2function pullUpAction () { 上拉加载更多 var page = i++; // 每上拉一次页码加一次 （就比如下一页下一页） Ajax(page); // 运行ajax 把2传过去告诉后台我上拉一次后台要加一页数据（当然 这个具体传什么还得跟后台配合） myScroll.refresh();// <-- Simulate network congestion, remove setTimeout from production!}function Ajax(page){ // ajax后台交互 $.ajax({ type : "post", dataType : "JSON", url : "/installerAjax", // 你请求的地址 data : { 'page': page // 传过去的页码 }, success : function(data){ data = eval(data.clientList); if(data.length){ // 如果后台传过来有数据执行如下操作 ， 没有就执行else 告诉用户没有更多内容呢 加载数据。。。 } }else{ $('.pullUpLabel').html('亲，没有更多内容了！'); } }, error : function(){ } }); } |
常用的参数如下：
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 精致垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fixedScrollbar 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true可以禁止滚动条超出
scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹，默认为true
momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）