vue实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页 效果，具体内容如下所示：
创新互联是专业的赤城网站建设公司，赤城接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行赤城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
html：
【{{item.code||item.name}}】 {{item.name}}
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:
添加滚动事件
{{item.code != null ?item.code:"/"}}{{deviceTip}}{{deviceTip}}
css:
tablelist-box{
height: //根据实际项目取
overflow:auto //必须 不然判断有问题
}css 定义
js
写入滚动事件
scrollEvent(e) {
if (e instanceof Event) {
let el = e.target;
let scrollTop = el.scrollTop;
// 获取可视区的高度
let clientHeight = el.clientHeight;
// 获取滚动条的总高度
let scrollHeight = el.scrollHeight;
let height = 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() {
let params = {
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 = "暂无数据";
return false;
}
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: "",
总结
以上所述是小编给大家介绍的vue 实现滚动到底部翻页效果(pc端),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
网页标题：vue实现滚动到底部翻页效果(pc端)
文章起源：http://pwwzsj.com/article/pgjgec.html
