pc端vue 滚动到底部翻页 效果，具体内容如下所示：
html：
<div class="list" ref="scrollTopList">
<div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)">
<span class="state" :class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}"></span>
<span class="text textcolor">【{{item.code||item.name}}】</span>
<span class="text">{{item.name}}</span>
</div>
</div>js:
先写滚动事件
handleScroll(){
let scrollTop = 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){
return false
}else{
this.pageSize = this.pageSize +10 //显示条数新增
this.getpageList() //请求列表list 接口方法
}
}else{
return false
}
},method中写节流函数
throttle(func, wait) {
let lastTime = null
let timeout
return () => {
let context = this;
let now = new Date();
let arg = arguments;
if (now - lastTime - wait > 0) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
func.apply(context, arg)
lastTime = now
} else if (!timeout) {
timeout = setTimeout(() => {
func.apply(context, arg)
}, wait)
}
}
},mounted中调用
mounted(){
this.$refs.scrollTopList.addEventListener("scroll",this.throttle(this.handleScroll,500),true)
},//——————————————————————————————-第二种写法
html:
添加滚动事件
<div class="tablelist-box" @scroll="scrollEvent($event)">
<div
class="tablelist"
:class="{'active':listDevicesDetailIndex==index}"
v-for="(item,index) of deviceList"
:key="index"
v-if="deviceList.length !== 0"
