大家都知道jQuery里沒有touch事件，所以在移動端使用原生js實現上拉加載效果還是很不錯的，閑話不多說，代碼如下：
1 //獲取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //給元素綁定監聽事件 個人習慣把監聽事件寫在一塊 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSection.addEventListener("touchmove", touchMove, false); 6 objSection.addEventListener("touchend", touchEnd, false); 7 8 //touchStart 觸發事件時要執行的方法 9 function touchStart(event) { 10 event.preventDefault(); 11 this.startY = event.changedTouches[0].pageY; 12 } 13 14 //touchMove 觸發事件的過程執行的方法 15 function touchMove(event) { 16 var change = event.changedTouches[0].pageY - this.startY; 17 this.change = change; 18 this.parentNode.style["-webkit-transform"] = "translate(0," + this.change + "px)"; 19 this.parentNode.style["transform"] = "translate(0," + this.change + "px)"; 20 this.parentNode.style["-webkit-transition"] = "all " + 0 + "s"; 21 this.parentNode.style["transition"] = "all " + 0 + "s"; 22 } 23 24 //touchEnd 事件結束執行的方法 25 function touchEnd(event) { 26 if (this.change < 0) { 27 this.parentNode.style["-webkit-transform"] = "translate(0," + this.change + "px)"; 28 this.parentNode.style["transform"] = "translate(0," + this.change + "px)"; 29 this.parentNode.style["-webkit-transition"] = "all " + 1 + "s"; 30 this.parentNode.style["transition"] = "all " + 1 + "s"; 31 appendData(this); 32 } else { 33 this.parentNode.style["-webkit-transform"] = "translate(0," + 0 + "px)"; 34 this.parentNode.style["transform"] = "translate(0," + 0 + "px)"; 35 this.parentNode.style["-webkit-transition"] = "all " + 0.5 + "s"; 36 this.parentNode.style["transition"] = "all " + 0.5 + "s"; 37 } 38 }
上拉加載更多需要注意的地方：在觸發上拉這個動作時記錄下當前頁的pageY，在動作結束時記錄下在頁面中的pageY，結束時的pageY-開始時的pageY得到變化的pageY，在做css3動畫時需要用到變化的pageY，touchEnd里面的appendData方法為ajax請求數據的方法，在這里不在贅述
簡單的實現了基本功能，需要的話可以在這個基礎上實現更多功能
歡迎大家批評指正~~