原生js移動端touch事件實現上拉載入更多

標籤：

大家都知道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請求資料的方法，在這裡不在贅述
簡單的實現了準系統，需要的話可以在這個基礎上實現更多功能
歡迎大家批評指正~~

原生js移動端touch事件實現上拉載入更多