今天给大家带来的是H5的上拉加载和下拉刷新特效。仿的是原生app的样式，不过外观可能有点差别。
首先我们使用的是jq的iScroll插件来编写。
到官网下载即可：
https://github.com/cubiq/iscroll
下面是实现的运行效果：
上下拉动，刷新和加载
下面的是页面html代码，要符合iScroll 代码原则：
（代码放不进来，只能截图了）
html代码
下面就是关键的js代码了
var myScroll,pullDownEl,pullDownOffset,pullUpEl,pullUpOffset,generatedCount=0;/**
*下拉刷新 （自定义实现此方法）
* myScroll.refresh(); //数据加载完成后，调用界面更新方法
*/
functionpullDownAction() {
setTimeout(function() {
var el, li, i;
el=document.getElementById('ul');
for(i=0;i<3;i++) {
li=document.createElement('li');
li.innerText='添加'+(++generatedCount);
el.insertBefore(li,el.childNodes[0]);
}
myScroll.refresh();//数据加载完成后，调用界面更新方法Remember to refresh when contents are loaded (ie: on ajax completion)
},1000);// <-- Simulate network congestion, remove setTimeout from production!
}
/**
*滚动翻页 （自定义实现此方法）
* myScroll.refresh(); //数据加载完成后，调用界面更新方法
*/
functionpullUpAction() {
setTimeout(function() {// <-- Simulate network congestion, remove setTimeout from production!
varel,li,i;
el=document.getElementById('ul');
for(i=0;i<3;i++) {
li=document.createElement('li');
li.innerText='添加'+(++generatedCount);
el.appendChild(li,el.childNodes[0]);
}
myScroll.refresh();//数据加载完成后，调用界面更新方法Remember to refresh when contents are loaded (ie: on ajax completion)
},1000);// <-- Simulate network congestion, remove setTimeout from production!
}
/**
*初始化iScroll控件
*/
functionloaded() {
pullDownEl=document.getElementById('pullDown');
pullDownOffset=pullDownEl.offsetHeight;
pullUpEl=document.getElementById('pullUp');
pullUpOffset=pullUpEl.offsetHeight;
myScroll= newiScroll('app', {
scrollbarClass:'myScrollbar',/*重要样式*/
useTransition: false,/*此属性不知用意，本人从true改为false */
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-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();// 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('app').style.left='0'; },800);
}
//初始化绑定iScroll控件
document.addEventListener('touchmove',function(e) {e.preventDefault(); },false);
document.addEventListener('DOMContentLoaded',loaded,false);
在这个代码实现后，仅仅能做到刷新和加载，如果想要模拟app里面的上拉刷新和下拉加载，我们还需要一点css3 的动画来实现
html,body{
width:100%;
height:100%;
}
body,ul,li{
padding:0;
margin:0;
border:0;
}
body{
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#app{
position:absolute;z-index:1;
top:0px;bottom:50px;left:0;
width:100%;
background:#555;
overflow:auto;
}
#scroller{
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul{
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li{
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid#ccc;
border-top:1px solid#fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li>a{
display:block;
}
/**
*
*下拉样式Pull down styles
*
*/
#pullDown,#pullUp{
background:#fff;
height:40px;
line-height:40px;
padding:5px10px;
border-bottom:1px solid#ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown.pullDownIcon,#pullUp.pullUpIcon{
display:block;float:left;
width:30px;height:30px;
background:url('img/pull-icon@2x.png')0 0no-repeat;
-webkit-background-size:30px60px;background-size:30px60px;
-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);
}
/**
*动画效果css3代码
*/
#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-keyframesloading{
from{-webkit-transform:rotate(0deg)translateZ(0); }
to{-webkit-transform:rotate(360deg)translateZ(0); }
}
以上代码就可以实现开始的gif动图中的内容，如果有问题，可以留言。
网友评论