原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件，所以在移动端使用原生js实现上拉加载效果还是很不错的，闲话不多说，代码如下：

 //获取要操作的元素
 var objSection = document.getElementsByTagName("div")[0];
 //给元素绑定监听事件  个人习惯把监听事件写在一块
 objSection.addEventListener("touchstart", touchStart, false);
 objSection.addEventListener("touchmove", touchMove, false);
 objSection.addEventListener("touchend", touchEnd, false);

 //touchStart 触发事件时要执行的方法
 function touchStart(event) {
     event.preventDefault();
     this.startY = event.changedTouches[0].pageY;
 }

 //touchMove 触发事件的过程执行的方法
 function touchMove(event) {
     var change = event.changedTouches[0].pageY - this.startY;
     this.change = change;
     this.parentNode.style["-webkit-transform"] = "translate(0," + this.change + "px)";
     this.parentNode.style["transform"] = "translate(0," + this.change + "px)";
     this.parentNode.style["-webkit-transition"] = "all " + 0 + "s";
     this.parentNode.style["transition"] = "all " + 0 + "s";
 }

 //touchEnd 事件结束执行的方法
 function touchEnd(event) {
     if (this.change < 0) {
         this.parentNode.style["-webkit-transform"] = "translate(0," + this.change + "px)";
         this.parentNode.style["transform"] = "translate(0," + this.change + "px)";
         this.parentNode.style["-webkit-transition"] = "all " + 1 + "s";
         this.parentNode.style["transition"] = "all " + 1 + "s";
         appendData(this);
     } else {
         this.parentNode.style["-webkit-transform"] = "translate(0," + 0 + "px)";
         this.parentNode.style["transform"] = "translate(0," + 0 + "px)";
         this.parentNode.style["-webkit-transition"] = "all " + 0.5 + "s";
         this.parentNode.style["transition"] = "all " + 0.5 + "s";
     }
 }

上拉加载更多需要注意的地方：在触发上拉这个动作时记录下当前页的pageY，在动作结束时记录下在页面中的pageY，结束时的pageY-开始时的pageY得到变化的pageY，在做css3动画时需要用到变化的pageY，touchEnd里面的appendData方法为ajax请求数据的方法，在这里不在赘述
简单的实现了基本功能，需要的话可以在这个基础上实现更多功能
欢迎大家批评指正~~