基于iSroll插件实现html5页面上拉加载更多
2015-08-13 19:49
696 查看
先引入iscroll.js文件
页面滑动部分的html结构如下:
参考上述几步,只需自定义pullDownAction、pullUpAction两个函数,便可实现html5页面的上、下拉事件(附上样式中的pull-icon.png图片)
页面滑动部分的html结构如下:
<div id="wrapper" style="overflow: hidden; left: 0px;"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> </div> <ul id="thelist"> <li>Pretty row 1</li> <li>Pretty row 2</li> ... </ul> <div id="pullUp"> <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span> </div> </div> </div>在页面加载完成时定义iscroll的滑动事件:
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0; function pullDownAction () { $.ajax({ url:"刷新的ajax请求", type:"POST", success:function(json){ //使用ajax请求刷新列表数据,这块肯定得自己写 ... myScroll.refresh();//刷新滑动区域 } }); } function pullUpAction () { $.ajax({ url:"加载更多的ajax请求", type:"POST", success:function(json){ //使用ajax请求返回的数据追加到列表后面,这块肯定得自己写 ... myScroll.refresh();//刷新滑动区域 } }); } 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 () {//myScroll刷新时触发 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 - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放立即加载...'; this.maxScrollY = this.maxScrollY; } else if (this.y > (this.maxScrollY + 5) && 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();//在这里定义下拉时的行为 } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'; pullUpAction();//在这里定义上拉时的行为 } } }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); window.addEventListener('load', function () { setTimeout(loaded, 200); }, false);当然不能忘了相关的样式,下面可供参考:
/** * * scroll styles * */ #pullDown, #pullUp { background:#fff; height:40px; line-height:40px; padding:5px 10px; border-bottom:1px solid #ccc; font-weight:bold; font-size:14px; color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon { display:block; float:left; width:40px; height:40px; background:url(../app/pull-icon.png) 0 0 no-repeat; -webkit-background-size:40px 80px; background-size:40px 80px; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; } #pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } }
参考上述几步,只需自定义pullDownAction、pullUpAction两个函数,便可实现html5页面的上、下拉事件(附上样式中的pull-icon.png图片)
相关文章推荐
- html5中session
- html5学习笔记(13)
- html5 - drag 拖拽
- CSS3 HTML5动画
- html5学习 - video标签
- html5初始化时间控件
- HTML5 Canvas火焰闪烁动画 火焰跟随鼠标
- DOMStringMap类型——HTML5新特性dataset的类型哦
- HTML5学习交流平台
- 新做的H5页面(具体应该说是百分比页面)
- H5调用本地摄像头
- 程序员爱情表白专用html5动画网页的代码
- 9秒学院Html5游戏:一场可预见的疯狂
- 混合应用开发 Hello Html5 (一)
- 【实例】html5-canvas中实现绘制虚线的方法
- HTML5射击类游戏----【地球保卫战】
- 【实例】html5-canvas通过鼠标绘制线段
- html5 video标签不能播放mp4的问题
- HTML5 获得canvas油漆环境
- html5学习笔记(7)