vue 使用鼠标滚动加载数据的例子
作者:平常心_c 时间:2024-05-28 15:42:21
关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下《vue.js 实战》中作者的一个解决策略:
1. 设置一个标志位用来判断数据是否在加载中
2. 将滚动区域设置成 overfow:auto(显示滚动条)
3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例
4. 当鼠标滚动到底部时,加载数据
4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载
关键代码如下:
<template>
//...代码省略
//该div 为要滚动区域
<div class="daily-list" ref="list" @scroll="handleScroll">
// ...
</div>
</template>
<script>
export default{
data(){
return {
recommendList:[], //存放滚动区域要显示的数据
isLoading:false //默认没有在加载数据
}
},
methods:{
//获取数据
getRecommendList(){
//表示正在加载数据
this.isLoading=true;
$.ajax.get('news/before/'+preDay).then(res=>{
this.recommendList.push(res);
//数据请求完成
this.isLoading=false;
})
},
handleScroll(){
const $list=this.$refs.list;
//如果数据有在加载中则这次请求退出
if(this.isLoading) return;
//已经滚动的距离加页面的高度等于整个内容区高度时,视为接触到底部
//scrollTop 获取到顶部的滚动距离
// clientHeight 表示页面视口高度
// scrollHeight 页面内容的高度
if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
this.getRecommendList();
}
}
},
mounted(){
this.getRecommendList()
}
}
</script>
<style>
width: 300px;
position: fixed;
top:0;
left: 150px;
//出现滚动条
overflow: auto;
</style>
来源:https://blog.csdn.net/qq_37674616/article/details/83316070
标签:vue,鼠标滚动,加载数据
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
asp内置对象Application详解
2007-09-19 12:08:00
python接口自动化如何封装获取常量的类
2023-04-17 07:44:22
CSS pointer-events下层元素被点击
2010-04-11 22:31:00
PHP平滑关闭/重启的实现方法
2023-10-05 08:48:29
python 字符串和整数的转换方法
2023-10-11 02:31:42
python多任务之协程的使用详解
2023-12-29 16:38:23
MySql分表、分库、分片和分区知识深入详解
2024-01-20 19:11:03
![](https://img.aspxhome.com/file/2023/8/116798_0s.png)
Vue.js原理分析之nextTick实现详解
2024-05-13 09:38:08
FrontPage2002简明教程五:css样式表的应用
2008-09-17 11:31:00
![](https://img.aspxhome.com/file/UploadPic/200810/17/20081017113345609s.jpg)
OpenCV+MediaPipe实现手部关键点识别
2021-08-02 10:32:24
![](https://img.aspxhome.com/file/2023/4/114744_0s.png)
python装饰器使用实例详解
2021-09-30 15:26:50
django 快速启动数据库客户端程序的方法示例
2023-07-31 09:31:59
![](https://img.aspxhome.com/file/2023/1/61441_0s.png)
详解SQL Server中数据库快照工作原理
2009-01-21 14:18:00
索引在Oracle中的应用深入分析
2023-07-04 19:50:49
浅谈pandas中对nan空值的判断和陷阱
2021-01-06 12:40:20
如何提升JavaScript的运行速度(DOM篇)
2010-05-17 13:32:00
Python下载ts文件视频且合并的操作方法
2021-11-15 15:40:19
![](https://img.aspxhome.com/file/2023/5/76985_0s.jpg)
php 保留小数点
2023-06-21 10:47:04
详解Mysql基础语法的使用
2024-01-28 07:50:05
Oracle数据库opatch补丁操作流程
2024-01-28 06:51:42
![](https://img.aspxhome.com/file/2023/9/64849_0s.png)