vue列表鼠标滚动翻页(数据量较大,几千万条数据,因此要滚动翻页,为了性能良好,鼠标滚动时发送请求页码page++),网上找不到自己写了一个,
2019-03-05 11:11
801 查看
标题 :vue列表鼠标滚动翻页(数据量较大,几千万条数据,因此要滚动翻页,为了性能良好,鼠标滚动时发送请求页码page++),网上找不到自己写了一个,如果用window. 或document.body会导致滚动穿透,导致如果多个页面要用到滚动翻页时,会发送其他页面的ajax或axios
1.先在要滚动的div上自定义名称 ref=“scrolltoplist”
<div ref="scrolltoplist" class="scrolltoplist"></ div>
2.监听绑定滚轮,滚动事件,调用自定义的this.handleScroll方法
mounted() { this.$refs.scrolltoplist.addEventListener( "scroll", this.handleScroll, true ); // 监听(绑定)滚轮 滚动事件 },
3.自定义方法计算滚动时发送请求
scrollTop滚动距离顶部的高度,
lientHeight文档的高度 不包括,
scrollHeight 滚动的高度
handleScroll() { // scrollTop滚动距离顶部的高度 // clientHeight文档的高度 不包括 // scrollHeight 滚动的高度 if ( this.$refs.scrolltoplist.scrollTop + this.$refs.scrolltoplist.clientHeight >= this.$refs.scrolltoplist.scrollHeight - 50 ) { console.log("down"); if (this.count >= this.pageNo * 60) { this.loading2 = true; this.loadData(); } else { return false; } } else { console.log("error"); return false; } }
、
loadData() { this.pageNo = this.pageNo + 1; this.getUserList(); },
4.写到这里想写一下,在app中下拉加载(浏览器中不那么容易出现),当数据过多造成页面元素过多,导致内存增加,这个问题就会导致页面滑动变卡顿
答:无限滑动的卡片,做法是只显示三个,其他的移除掉,需要时再加载。
相关文章推荐
- Android通过post请求发送一个xml,解析返回xml数据
- C# 自己写的一个类,用来将结构体或类中的数据打成"数据包",进行网络发送
- Python实现从键盘接收若干个整数,存放在列表中。自己实现某种排序算法,将输入数据进行升序排列,并将排序结果在屏幕上输出,并对比该算法与列表自带sort方法的性能。
- 一个关于LightningChart’s滚动线图无与伦比的性能演示。滚动线图的实时测量数据点超过10亿。
- vue解决一个方法同时发送多个请求的问题
- 自己动手写一个Memory cache 来缓存主数据提高性能
- Ajax发送一个请求,返回两个表格数据,用easy UI的分两个tab,两个表格显示
- 使用vue-resource库发送请求获取数据
- vue.js 2.0 版本—写一个模拟后台数据请求
- VB.Net自己写的一个控件:ComboBox下拉列表中显示多列数据(可以绑定数据表)
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
- vue使用axios发送数据请求
- 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期
- js获取src请求 得到一个参数和多个参数写法(这是集中网上的多个方法,自己cv过去就可以使用)
- TCP、UDP数据包大小的限制(UDP数据包一次发送多大为好)——数据帧的物理特性决定的,每层都有一个自己的数据头,层层递减
- [Socket网络编程]由于套接字没有连接并且(当使用一个 sendto 调用发送数据报套接字时)没有提供地址,发送或接收数据的请求没有被接受。
- vue中的所有axios请求都会发送2次,但是第一次不返回数据的原因
- fileupload应用 上传数据自己选择收件人选择上传的附件点发送后会创建一个文件夹存入你上传的附件
- C# 自己写的一个类,用来将结构体或类中的数据打成"数据包",进行网络发送(转载)
- fileupload应用 上传数据自己选择收件人选择上传的附件点发送后会创建一个文件夹存入你上传的附件