微客导航 » 文章资讯 » 移动端如何用下拉刷新的方式实现上拉加载

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

2023-09-04 11:29:06 314

实现上拉加载最普遍的方式就是监听滚动条的滚动事件，而移动端的下拉刷新利用的是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))+"

" } page++; setTimeout(function(){ vartips=outDom.querySelector(".tips");//获取提升 tips&&outDom.removeChild(tips);//如果不是第一次添加 str+="加载更多"; outDom.innerHTML+=str; that.actualHeight=outDom.offsetHeight; that.key=true; },2000) }

原理也是很简单，监听手势事件判断是否距离足够，足够就可以添加数据啦~~~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐