pc端vue滚动到底部翻页效果,具体内容如下所示:
html:
& lt; div类="列表" ref=皊crollTopList”比;
& lt; div类=v代表“listsmall”=傲斜硐?指数”:关键=爸甘盄click=癵etDeviceInfo (item.id)”在
& lt;跨类=白刺?class=" {state1: item.status==1,“state0”: item.status==0,“state2”: item.status==2,“state3”: item.status==3}“祝辞& lt;/span>
& lt;跨类="文本输入textcolor "祝辞【{{item.code | | item.name}}】& lt;/span>
& lt;跨类="文本"在{{item.name}} & lt;/span>
& lt;/div>
& lt;/div>
js:
先写滚动事件
handleScroll () {
这让scrollTop=efs.scrollTopList.scrollTop美元,
clientHeight=efs.scrollTopList.clientHeight美元,
scrollHeight=efs.scrollTopList.scrollHeight美元,
身高=50;//根据项目实际定义
如果(scrollTop + clientHeight祝辞=scrollHeight -高度){
如果这一点。页大小比;this.total) {
返回假
其他}{
这一点。页大?Ｒ炒笮? 10//显示条数新增
this.getpageList()//请求列表列表接口方法
}
其他}{
返回假
}
},
方法中写节流函数
节流(函数等){
让lastTime=零
让超时
返回()=比;{
让背景=;
我们现在=新的日期();
让arg=参数;
如果现在- lastTime等在0) {
如果(超时){
clearTimeout(超时)
timeout=零
}
函数。应用(上下文参数)
现在lastTime=}else if(超时){
timeout=setTimeout(()=比;{
函数。应用(上下文参数)
},等)
}
}
},
安装中调用
安装(){
这个。refs.scrollTopList.addEventListener美元(“滚动”,this.throttle (this.handleScroll, 500),真的)
},
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -第二种写法
html:
添加滚动事件
& lt; div类=皌ablelist-box @scroll”=皊crollEvent(事件)美元”在
& lt; div
类=" tablelist "
:类="{“活跃”:listDevicesDetailIndex==指数}”
v代表=癲eviceList(项目、索引)”
:关键="指数”
v=" deviceList。长度!==0 "
@click=" deviceDetail(项目、索引)”
比;
& lt;跨类=皌ablelist-status”比;
& lt;我
:类=" {zx: item.status==1, lx:项目。状态==2,wjh: item.status==0, gj: item.status==3}”
祝辞& lt;/i>
& lt;/span>
& lt;跨类=" tablelist-bg "在{{项目。代码!=null & # 63; item.code: "}} & lt;/span>
& lt;/div>
& lt; div类="更多" v-show=? deviceListIsFinish”在{{deviceTip}} & lt;/div>
& lt; div类="更多" v-show=癲eviceListIsFinish”在{{deviceTip}} & lt;/div>
& lt;/div>
css: ,
tablelist-box {
高度://根据实际项目取
溢出:自动//必须不然判断有问题
}
css定义
js
写入滚动事件
scrollEvent (e) {
如果(e instanceof事件){
让el=e。target;
让scrollTop=el.scrollTop;//获取可视区的高度
让clientHeight=el.clientHeight;//获取滚动条的总高度
让scrollHeight=el.scrollHeight;
让身高=50;//到底了//console.log (this.deviceListIsLoad this.deviceListIsFinish);//控制台。日志(scrollTop clientHeight scrollHeight);//是否继续加载且已完成加载
如果(
scrollTop + clientHeight祝辞=scrollHeight,,
this.deviceListIsLoad,,
this.deviceListIsFinish !
){//把距离顶部的距离加上可视区域的高度等于或者大于滚动条的总高度就是到达底部
this.deviceListIsLoad=true;
console.log(“到底了”);
setTimeout(()=比;{
this._deviceListPage ();
},1000);
}
}
请求列表的处理
_deviceListPage () {
让params={
页大小:this.devicePageSize,
pageNum: this.devicePageNum,
千瓦:",//查询条件(通配查询条件)
类型:this.deviceType,//设备类型(下拉)2.1.6接口获取
代码:this.deviceCode,//设备编的号
areaId: this.deviceareaId,//位置区域
状态:this.deviceStatus,//状态1:在线(正常),0:未激活,2已离线,3。告警
imei:“//imei编的号
};
deviceListPage (params)。然后(res=比;{
如果(res.code==200) {
this.devicePageTotal=res.body.total;
this.devicePageSize=res.body.pageSize;
this.devicePageNum=res.body.pageNum;
this.devicePageTotalPages=方法(
(this.devicePageTotal + this.devicePageSize - 1)/this.devicePageSize
);
如果(this.devicePageTotal==0) {//console.log(“没有数据”);//没有数据
this.deviceListnodata=https://www.yisu.com/zixun/true;
this.deviceListIsLoad=false;
this.deviceListIsFinish=true;
this.devicePageNum=1;
this.deviceTip="暂无数据”;
返回错误;
}
this.deviceList=this.deviceList.concat (res.body.datas);//console.log (this.devicePageNum this.devicePageTotalPages);
如果(this.devicePageNum==this.devicePageTotalPages) {//没有更多
this.deviceListIsLoad=false;
this.deviceListIsFinish=true;
this.devicePageNum=1;
this.deviceTip="没有更多了~”;//console.log(“没有更多了");
其他}{//console.log(“下一页”);//下一页
this.deviceListIsLoad=true;
this.deviceListIsFinish=false;
this.devicePageNum + +;
this.deviceTip="正在加载中~”;
}//控制台。日志(“deviceList this.deviceList);
其他}{//this.deviceList=[];
this.deviceListIsLoad=false;
this.deviceListIsFinish=true;
this.devicePageNum=1;
this.deviceTip="数据加载失败~”;
}
})；
},
