首页 > 代码库 > iscroll 移动端上拉刷新 下拉加载 实例 ！
iscroll 移动端上拉刷新 下拉加载 实例 ！
iscroll.js 是一款移动端框架， 相信做移动的同学都有接触吧， 哈哈 ，
下面分享一下用法 ， 首先再你的head里引入iscroll.js 路径需要自行修改
<script src="http://www.mamicode.com/iscroll.js"></script>
好吧， 引入以后就该来点实际的啦 ，
首先你的搭建你的HTML 结构 ： 如以下代码 ， 运动的对象就是你ID 为wrapper下的第一个子元素 ,没办法谁叫你用的框架呢 。 当然同学们也可以自行扩展
<div id="wrapper"> <ul> <li></li> ..... </ul> </div>
引完js ， 搭建好结构以后 然后再贴入如下脚本
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 = http://www.mamicode.com/eval(data.clientList);"<li><a href=http://www.mamicode.com/‘/apps/clientCase?clientId=" +data[i+i].id+ "‘ class=‘left‘><p class=‘jsyh_logo‘><img src=http://www.mamicode.com/‘"+"http://localhost:8080"+ "/" + data[i+i].photo+"‘></p><div class=‘text‘><p>" + data[i+i].clientName +"</p><span class=‘blue_icon‘>"+data[i+i].number+"</span></div></a><a href=http://www.mamicode.com/‘/apps/clientCase?clientId=" +data[i+i+1].id+ "‘ class=‘left‘><p class=‘jsyh_logo‘><img src=http://www.mamicode.com/‘"+"http://localhost:8080"+ "/" + data[i+i+1].photo+"‘></p><div class=‘text‘><p>" + data[i+i+1].clientName +"</p><span class=‘blue_icon‘>"+data[i+i+1].number+"</span></div></a></li>"; $(‘ul.customer‘).append(oLis); } }else{ $(‘.pullUpLabel‘).html(‘亲，没有更多内容了！‘); } }, error : function(){ } }); }建议页面不要大量用到iscroll， 太耗性能
iscroll 移动端上拉刷新 下拉加载 实例 ！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。