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

pc端vue 滚动到底部翻页 效果,具体内容如下所示:

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:

添加滚动事件

class="tablelist"

:class="{'active':listDevicesDetailIndex==index}"

v-for="(item,index) of deviceList"

:key="index"

v-if="deviceList.length !== 0"

@click="deviceDetail(item,index)"

>

:class="{zx:item.status==1,lx:item.status==2, wjh:item.status==0,gj:item.status==3}"

>

{{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端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/502487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux上的JAVA的IDE,在linux上运行的基于文本的强大java IDE

问题是 – 我喜欢旧货;)有一些我喜欢的旧笔记本电脑.它当然运行Xorg,而且速度很快.但Intellij IDEA仍然很慢.想过emacs,但从未使用过. emacs不是太复杂了吗?在许多窗口中以X下的文本模式工作,并制作一些脚本来自动化.解决方法:三大Java /通用IDE(IntelliJ IDEA,Ecli…

a8处理器相当于骁龙几_天玑700处理器怎么样 天玑700相当于骁龙多少_CPU_硬件教程...

根据最新消息得知,联发科(MediaTek)天玑系列将推出新的5G芯片——天玑700,对于这款芯片的性能参数目前透露的不是很多,具体天玑700处理器性能怎么样,大家不妨来看看根据最新消息得知,联发科(MediaTek)天玑系列将推出新的5G芯片——…

git上传分支的原理_几张图让你彻底弄懂git工作流(二) ——git分支

上篇文章已经说了Git简史以及Git基础,那么这篇文章简单总结下Git分支Git分支为了理解 Git 分支的实现方式,我们需要回顾一下,Git保存的不是文件差异或者变化量,而只是一系列文件快照.Git分支分支其实就是从某个提交对象往回看的历史文字描述imageGit中的…

firefox是什么浏览器_Selenium Firefox驱动程序:使用Firefox浏览器自动进行测试

根据statcounter统计,到2020年6月,Mozilla Firefox浏览器在全球浏览器市场中所占份额为4.25%,因此,对于每个Selenium测试用例,Mozilla Firefox浏览器都是不可避免的。 Mozilla开发人员推出了Geckodriver(也…

oracle 谭岚_Hibernate实现Oracle BLOB的数据读写(2)

这次采用的是EJB3的配置测试环境与前次一样:Hibernate3.6.7,Oracle 10g Express,JDK7,Win71,数据库脚本create table TUser (ID char(32) not null,name varchar(10char) not null,photo blob, --头像constraint PK_TU…

matlab绘制簇状图,用matplotlib自定义绘制柱形图

import pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsdf pd.read_excel("D:\我的文档\jupyter notebook.xlsx")dfsns.set(style "white", font_scale 1.2)# 解决中文乱码plt.rcParams[ "font.sans-serif"] "simhe…

hp打印机怎么连接电脑_打印机怎么连接电脑?安装打印机图文教程

怎么安装打印机?有用户买了打印机后却不懂该如何安装并且连接电脑,下面就给大家分享打印机的具体安装方法。本地打印机安装:1.先把随机配送光盘放进光驱,如电脑没有光驱的话,可以直接把文件拷到U盘,再放到电…

toad dba suite for oracle 12,Toad DBA Suite 和Toad Development Suite的区别

这两个版本都包括了Toad、Sql Optimizer、Data Modeler、Toad DataAnalysi、Konwledges等基本软件。DBA版又增加了Spotlight On Oracle单机版,Development版则增加了Benchmark for Oracle和Code Tester这两个软件。可以认为DBA版和开发版是不同的打包方式。(以上内容…

正泰eplan_【万泉河】给EPLAN初学者的建议:不用宏

首先声明,我不是EPLAN的高手,对画电气图的熟悉程度,远远不如我对PLC和WinCC的来的得心应手。但在这里,把我个人一点点经验推荐给大家。以避免新手在初学EPLAN的时候遭遇过多的挫折,从而一次次的由入门到放弃。这是我个…

git 查看自己秘钥_gitlab配置ssh密钥及简单使用

演示环境:当前系统Centos6.9,使用IP192.168.0.80修改gitlab仓库地址编辑gitlab.yml文件vim /opt/gitlab/embedded/service/gitlab-rails/config/gitlab.yml将host: gitlab.example.com改成host: 192.168.0.80PS:当然你也可以把192.168.0.80改…

码工里开关灯为什么遮罩层在下面_装修公司为什么推荐无主灯设计?

此前的文章,我们曾多次提到无主灯设计,包括它的一些做法和注意事项,介绍过它高明的艺术手法。但是,我们从未讲解过无主灯设计的一些缺点和盲区,所以,也许笔者下面要讲的内容,将会颠覆你此前对无主灯设计的认识。无主灯设计客厅缺点一:挑空间(层高)一直以来,我们可能都认为,无主…

oracle导入 不是dba,IMP-00013只有DBA才能导入由其他DBA导出的文件

IMP-00013 只有 DBA 才能导入由其他 DBA 导出的文件--实例演示---system用户导出C:\Users\ZML>exp system/zml fileD:\zml.dmp log D:\zml.log tables (zml)Export: Release 11.2.0.1.0 - Production on 星期一 4月 21 21:39:12 2014Copyright (c) 1982, 2009, Oracle and…

oracle dbms_crypto,Oracle的dbms_obfuscation_toolkit加密解密数据

oracle从8i开始提供一个数据加密包:dbms_obfuscation_toolkit.利用这个包,我们可以对数据进行DES,Triple DES或者MD5加密. 本文就此讲解如何使用以及使用过程需要注意的问题.1. dbms_obfuscation_toolkit简介dbms_obfuscation_toolkit主要有一下几个存储过程:-DESGETKEY -- 产…

黑苹果系统坏了如何恢复_黑苹果macOS系统U盘版/恢复版基础安装教程

写在前面本文最后更新:2020年7月17日本文是一篇黑苹果安装基础教程,内容比较入门。安装黑苹果,相信谁都不敢说自己能100%解决所有问题。如果本文未能解决你的问题,请见谅。本文主要介绍两种安装方式:U盘安装&#xff0…

为什么安监控需要公网ip_媲美专线的视频监控组网,无须公网ip

众所周知,视频监控是安防系统的重要组成部分,各行各业必备,比如:超市、学校、公司、厂区等等随着社会的发展,利用网络传输搭建视频监控系统,已经成为了各行各业的普遍需求今天给大家带来,媲美专…

php中的file_upload,PHP文件上传(PHP file upload)

PHP文件上传(PHP file upload)我正在尝试使用php将文件上传到我的服务器,将它们保存到我的mysql数据库中,但我无法让它工作,这是我正在使用的脚本,我相信它与“$ _FILES有关“因为当我把它拿出来时”&& $ _FILES [userfil…

java 调用jira_java调用jira接口

http://www.cnblogs.com/starcrm/p/4837971.html首先通过jira的wsdl(http://localhost:8080/rpc/soap/jirasoapservice-v2?wsdl)生成要引入的类然后写客户端:package jiraTEST;import java.net.URI;import java.net.URISyntaxException;import java.util.ArrayList…

百度seo排名点击器app_百度SEO优化和百度竞价优缺点 - 百度整站排名

原出处:超级排名系统原文链接:百度SEO优化和百度竞价优缺点 - 超级排名系统SEO优化的优势:1、低价:在百度优化排名中,维持一年排名的成本可能只有一到两个月的竞价成本,这比竞价便宜得多,超级排…

html网页放大时文字不换行_WEB前端-html基础

一、介绍1、HTML概念HTML(Hypertext Mark-up Language)即超文本标记语言2.HTML特点HTML不需要编译,直接由浏览器执行HTML文件是一个文本文件HTML文件必须使用html或htm为文件名后缀HTML大小写不敏感,HTML与html一样3.HTML基础语法…

linux目录隐藏技术,Linux环境下的高级隐藏技术

摘要:本文深入分析了Linux环境下文件、进程及模块的高级隐藏技术,其中包括:Linux可卸载模块编程技术、修改内存映象直接对系统调用进行修改技术,通过虚拟文件系统proc隐藏特定进程的技术。隐藏技术在计算机系统安全中应用十分广泛…