vue 实现滚动到底部翻页效果(pc端)

2023-08-18 08:49:04 148

handleScroll(){ letscrollTop=this.$refs.scrollTopList.scrollTop, clientHeight=this.$refs.scrollTopList.clientHeight, scrollHeight=this.$refs.scrollTopList.scrollHeight, height=50;//根据项目实际定义 if(scrollTop+clientHeight>=scrollHeight-height){ if(this.pageSize>this.total){ returnfalse }else{ this.pageSize=this.pageSize+10//显示条数新增 this.getpageList()//请求列表list接口方法 } }else{ returnfalse } },

throttle(func,wait){ letlastTime=null lettimeout return()=>{ letcontext=this; letnow=newDate(); letarg=arguments; if(now-lastTime-wait>0){ if(timeout){ clearTimeout(timeout) timeout=null } func.apply(context,arg) lastTime=now }elseif(!timeout){ timeout=setTimeout(()=>{ func.apply(context,arg) },wait) } } },

//-------------------------------------------------------------------------------------------第二种写法

scrollEvent(e){ if(einstanceofEvent){ letel=e.target; letscrollTop=el.scrollTop; //获取可视区的高度 letclientHeight=el.clientHeight; //获取滚动条的总高度 letscrollHeight=el.scrollHeight; letheight=50; //到底了 //console.log(this.deviceListIsLoad,this.deviceListIsFinish); //console.log(scrollTop,clientHeight,scrollHeight); //是否继续加载且已完成加载 if( scrollTop+clientHeight>=scrollHeight&& this.deviceListIsLoad&& !this.deviceListIsFinish ){ //把距离顶部的距离加上可视区域的高度等于或者大于滚动条的总高度就是到达底部 this.deviceListIsLoad=true; console.log("到底了"); setTimeout(()=>{ this._deviceListPage(); },1000); } }

_deviceListPage(){ letparams={ pageSize:this.devicePageSize, pageNum:this.devicePageNum, kw:"",//查询条件（通配查询条件） type:this.deviceType,//设备类型（下拉）2.1.6接口获取 code:this.deviceCode,//设备编号 areaId:this.deviceareaId,//位置区域 status:this.deviceStatus,//状态1：在线（正常），0：未激活，2已离线，3.告警 imei:""//imei编号 }; deviceListPage(params).then(res=>{ if(res.code==200){ this.devicePageTotal=res.body.total; this.devicePageSize=res.body.pageSize; this.devicePageNum=res.body.pageNum; this.devicePageTotalPages=parseInt( (this.devicePageTotal+this.devicePageSize-1)/ this.devicePageSize ); if(this.devicePageTotal==0){ //console.log("没有数据"); //没有数据 this.deviceListnodata=true; this.deviceListIsLoad=false; this.deviceListIsFinish=true; this.devicePageNum=1; this.deviceTip="暂无数据"; returnfalse; } this.deviceList=this.deviceList.concat(res.body.datas); //console.log(this.devicePageNum,this.devicePageTotalPages); if(this.devicePageNum==this.devicePageTotalPages){ //没有更多 this.deviceListIsLoad=false; this.deviceListIsFinish=true; this.devicePageNum=1; this.deviceTip="没有更多了~"; //console.log("没有更多了"); }else{ //console.log("下一页"); //下一页 this.deviceListIsLoad=true; this.deviceListIsFinish=false; this.devicePageNum++; this.deviceTip="正在加载中~"; } //console.log("deviceList",this.deviceList); }else{ //this.deviceList=[]; this.deviceListIsLoad=false; this.deviceListIsFinish=true; this.devicePageNum=1; this.deviceTip="数据加载失败~"; } }); },

devicePageSize:10,//每页显示 devicePageNum:1,//当前页 devicePageTotal:0,//总条数 devicePageTotalPages:0,//总页数 deviceListIsFinish:false,//是否加载完成 deviceListIsLoad:false,//是否加载更多 deviceListnodata:false,//是否有数据 deviceTip:"",

vue 实现滚动到底部翻页效果(pc端)

热门推荐

随机推荐