html：
<divclass="list"ref="scrollTopList">
<divclass="listsmall"v-for="(item,index)oflist":key="index"@click="getDeviceInfo(item.id)">
<spanclass="state":class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}"></span>
<spanclass="texttextcolor">【{{item.code||item.name}}】</span>
<spanclass="text">{{item.name}}</span>
</div>
</div>
js:
先写滚动事件
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
}
},
method中写节流函数
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)
}
}
},
mounted中调用
mounted(){
this.$refs.scrollTopList.addEventListener("scroll",this.throttle(this.handleScroll,500),true)
},
//-------------------------------------------------------------------------------------------第二种写法
html:
添加滚动事件
<divclass="tablelist-box"@scroll="scrollEvent($event)">
<div
class="tablelist"
:class="{'active':listDevicesDetailIndex==index}"
v-for="(item,index)ofdeviceList"
:key="index"
v-if="deviceList.length!==0"
@click="deviceDetail(item,index)"
>
<spanclass="tablelist-status">
<i
:class="{zx:item.status==1,lx:item.status==2,wjh:item.status==0,gj:item.status==3}"
></i>
</span>
<spanclass="tablelist-bg">{{item.code!=null?item.code:"/"}}</span>
</div>
<divclass="list-more"v-show="!deviceListIsFinish">{{deviceTip}}</div>
<divclass="list-more"v-show="deviceListIsFinish">{{deviceTip}}</div>
</div>
css:
tablelist-box{
height://根据实际项目取
overflow:auto//必须不然判断有问题
}
css定义
js
写入滚动事件
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="数据加载失败~";
}
});
},
return中的定义
devicePageSize:10,//每页显示
devicePageNum:1,//当前页
devicePageTotal:0,//总条数
devicePageTotalPages:0,//总页数
deviceListIsFinish:false,//是否加载完成
deviceListIsLoad:false,//是否加载更多
deviceListnodata:false,//是否有数据
deviceTip:"",
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html