移动端如何用下拉刷新的方式实现上拉加载
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样?
html结构
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样?
html结构
这里我们做了两个主要的盒子,在两个盒子内实现上拉加载。结构很简单。
css样式
*{ 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; }
最外面的盒子设置overflow:hidden;中间盒子不设置高度,靠子盒子item撑起。
js代码
/*下拉加载*/ functiontDscroll(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;//偏移量 varthat=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; vartempArr=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; varchangNum=(this.originY+this.changedY); varscrollHeight=-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"; } }; vardom=document.querySelector("#box1");//获取dom vardom2=document.querySelector("#box2");//获取dom varobj={ dom:dom, fn:add }; varobj2={ dom:dom2, fn:add }; newtDscroll(obj); newtDscroll(obj2); varpage=0;//当前的页数(模拟用) //模拟ajax functionadd(outDom){ varthat=this; this.key=false; varstr=""; for(vari=1;i<11;i++){ str+=""+(i+((page)*10))+"
原理也是很简单,监听手势事件判断是否距离足够,足够就可以添加数据啦~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。