感覺一個人玩lol也沒意思了，玩會手機，看到這個下拉刷新功能就寫了這個demo！ 這個demo寫的比較隨意，咱不能當做插件使用，基本思想是沒問題的，要用就自己封裝吧！ 直接上代碼分析下吧！ 佈局： 就2行，只為實現功能，足矣！ js也不複雜，先定義2個變數，貫穿整個demo，進了不要全局變數，當然， ...
感覺一個人玩lol也沒意思了，玩會手機，看到這個下拉刷新功能就寫了這個demo！
這個demo寫的比較隨意，咱不能當做插件使用，基本思想是沒問題的，要用就自己封裝吧！
直接上代碼分析下吧！
佈局：
<ul class="show-area" style="min-height:100px;"></ul>
<button class='page-btn-nick' >載入更多</button>
就2行，只為實現功能，足矣！
js也不複雜，先定義2個變數，貫穿整個demo，進了不要全局變數，當然，封裝的時候也可以當做閉包參數！
var m=0,n=2;//m:button點擊次數 n:一次載入幾條數據
請求：
$.ajax('paging.html')
這裡我就寫的本頁面地址作為測試url。
下麵請求成功後的處理就是重點了：
var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
response=obj.developer;//假設請求到的數據是obj
m++;
var data='',elm='';
if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
data=response.slice(n*(m-1));
$('.page-btn-nick').html('沒有更多了');
$('.page-btn-nick').attr('disabled','disabled');
}else{
data=response.slice(n*(m-1),n*m);
}
中心思想：
請求按鈕點擊一次，m+1，講請求的數據拆分，只要需要的數據data；
data=response.slice(n*(m-1),n*m);
slice(s,e)函數獲取請求到的數據的一部分，s：response的起始位置，e結尾位置（取不到e位置的元素），返回值是一個含頭不含尾的數組。
這裡由於開始預設載入n條數據，m已經加了一次1了，所以要s和e要對應的改變；
將數據動態載入到頁面：
var len=data.length;
for(var i= 0;i<len;i++){
elm+="<li>"+data[i].name+"</li>";
}
$('.show-area').append(elm);
這裡的append()要比html()更優！
我看有些developer是勇的html()，這樣每載入一次，頁面中的所有li將全部清空，在重新載入所有的li，感覺每次載入都要載入有點多餘的數據，浪費啊……
看上面的數據就知道，我是講每次請求的數據在slice()一次，在添加到頁面。這要寫我每載入一次，只把這次載入的數據append到ul的最後，以前的li並不會清空，這要載入的數據就是每次想要多加的必要數據，沒有重覆添加，感覺給力點吧！
後面我把請求數據的getData()作為button點擊事件處理函數，同時放在判斷後的下拉事件中，就可以實現點擊按鈕動態載入數據和下拉刷新載入數據了！
最後附上完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>paging nick</title>
<style>
</style>
</head>
<body>
<ul class="show-area" style="min-height:100px;"></ul>
<button class='page-btn-nick' >載入更多</button>
<script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
;(function(){
getData();
var m=0,n=2;//m:button點擊次數 n:一次載入幾條數據
$('.page-btn-nick').click(getData);
function getData(){
$.ajax('paging.html').then(function(response){//測試url寫本頁面
var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
response=obj.developer;//假設請求到的數據是obj
m++;
var data='',elm='';
if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
data=response.slice(n*(m-1));
$('.page-btn-nick').html('沒有更多了');
$('.page-btn-nick').attr('disabled','disabled');
}else{
data=response.slice(n*(m-1),n*m);
}
var len=data.length;
for(var i= 0;i<len;i++){
elm+="<li>"+data[i].name+"</li>";
}
$('.show-area').append(elm);
},function(err){
console.log(err);
});
}
$(".show-area").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".show-area").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
getData();
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
}());
</script>
</body>
</html>
View Code
可以直接複製完整代碼，webstorm打開看看看，測試下吧！
移動端下拉事件就一筆帶過了，可以參考我寫的有關於移動化滑動事件的博文！
