今天給大家?guī)淼氖荋5的上拉加載和下拉刷新特效。仿的是原生app的樣式，不過外觀可能有點(diǎn)差別。
首先我們使用的是jq的iScroll插件來編寫。
到官網(wǎng)下載即可：
https://github.com/cubiq/iscroll
下面是實(shí)現(xiàn)的運(yùn)行效果：
下面的是頁面html代碼，要符合iScroll 代碼原則：
（代碼放不進(jìn)來，只能截圖了）
下面就是關(guān)鍵的js代碼了
var myScroll,pullDownEl,pullDownOffset,pullUpEl,pullUpOffset,generatedCount=0;
/**
*下拉刷新 （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh();? //數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
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();//數(shù)據(jù)加載完成后，調(diào)用界面更新方法Remember to refresh when contents are loaded (ie: on ajax completion)
},1000);// <-- Simulate network congestion, remove setTimeout from production!
}
/**
*滾動(dòng)翻頁 （自定義實(shí)現(xiàn)此方法）
* myScroll.refresh();? //數(shù)據(jù)加載完成后，調(diào)用界面更新方法
*/
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();//數(shù)據(jù)加載完成后，調(diào)用界面更新方法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);
在這個(gè)代碼實(shí)現(xiàn)后，僅僅能做到刷新和加載，如果想要模擬app里面的上拉刷新和下拉加載，我們還需要一點(diǎn)css3 的動(dòng)畫來實(shí)現(xiàn)
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);
}
/**
*動(dòng)畫效果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); }
}
以上代碼就可以實(shí)現(xiàn)開始的gif動(dòng)圖中的內(nèi)容，如果有問題，可以留言。
