移动端如何用下拉刷新的方式实现上拉加载

<div class="main-box" id="box1">
 <div class="popup-box">
 </div>
</div>
<div class="main-box" id="box2">
 <div class="popup-box">
 </div>
</div>

 * {
 margin: 0;
 padding: 0;
 }
 .main-box {
 background: skyblue;
 width: 100%;
 height: 300px;
 overflow: hidden;
 }
 .popup-box {
 width: 100%;
 }
 .item {
 width: 100%;
 line-height: 40px;
 text-align: center;
 padding: 20px;
 box-sizing: border-box;
 }
 .tips{
 text-align: center;
 }
 #box2 {
 margin-top: 50px;
 }

 /*下拉加载*/
 function tDscroll(obj) {
 this.key = true; //防止重复的请求
 this.dom = obj.dom; //传入的dom
 this.fn = obj.fn; //回调函数
 this.outDom = this.dom.querySelector(".popup-box"); //获取内容盒子
 this.showHeight = dom.offsetHeight; //显示的高度
 this.actualHeight = this.outDom.offsetHeight; //获取实际高度的内容
 this.startY = 0; //起始点击位置
 this.changedY = 0; //手指移动的距离
 this.originY = 0; //偏移量
 var that = this;
 this.dom.addEventListener("touchstart",function (ev) {
 that.onStart(ev);
 });
 this.dom.addEventListener("touchmove",function (ev) {
 that.onMove(ev);
 });
 this.dom.addEventListener("touchend",function (ev) {
 that.onEnd(ev);
 });
 this.fn.call(this,this.outDom);
 };

 tDscroll.prototype.onStart = function (ev) {
 this.startY = ev.targetTouches[0].clientY;
 var tempArr = window.getComputedStyle(this.outDom).transform.split(",");
 if (tempArr.length > 2) {
 this.originY = parseInt(tempArr[tempArr.length - 1]) || 0;
 }
 };

 tDscroll.prototype.onMove = function (ev) {
 this.changedY = ev.touches[0].clientY - this.startY;
 var changNum = (this.originY + this.changedY);
 var scrollHeight = -changNum + this.showHeight;
 if (changNum > 50)return;
 if (scrollHeight > this.actualHeight + 50)return;
 if (scrollHeight > this.actualHeight - 50 && this.key) {
 this.fn.call(this,this.outDom);
 }
 this.outDom.style.cssText = "transform: translateY(" + changNum + "px);";
 };

 tDscroll.prototype.onEnd = function() {
 if ((this.originY + this.changedY) > 50 ) {
 this.outDom.style.cssText = "transform: translateY(0px);transition:all .3s";
 }
 if (-(this.originY + this.changedY) + this.showHeight > this.actualHeight + 50) {
 this.outDom.style.cssText = "transform: translateY(-"+(this.actualHeight - this.showHeight)+"px);transition:all .3s";
 }
 };


 var dom = document.querySelector("#box1"); //获取dom
 var dom2 = document.querySelector("#box2"); //获取dom
 var obj = {
 dom : dom,
 fn : add
 };
 var obj2 = {
 dom : dom2,
 fn : add
 };
 new tDscroll(obj);
 new tDscroll(obj2);
 var page = 0; //当前的页数(模拟用)

 // 模拟ajax
 function add(outDom) {
 var that = this;
 this.key = false;
 var str = "";
 for (var i = 1;i < 11;i++) {
 str+="<div class='item'>"+(i+((page)*10))+"</div>"
 }
 page++;
 setTimeout(function () {
 var tips = outDom.querySelector(".tips"); //获取提升
 tips && outDom.removeChild(tips); //如果不是第一次 添加
 str += "<div class='tips'>加载更多</div>";
 outDom.innerHTML += str;
 that.actualHeight = outDom.offsetHeight;
 that.key = true;
 },2000)
 }