vue-监听视图滚动-加载下一页数据(鼠标滚动到底,加载)
2023-09-11 14:18:36 时间
<div class="daily-list" ref="list"> <template> <div v-for="(item,index) in arrayItem" :key="index"> <div>{{item}}</div> </div> </template> </div>
data:
arrayItem: 100,
isLoading: false
style:
.daily-list{
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 150px;
/* 具备滚动的能力 */
overflow: auto;
border-right: 1px solid #d7dde4;
}
mounted() { // 获取dom const $list = this.$refs.list; // 监听内容的滚动事件 $list.addEventListener('scroll', () => { if (this.isLoading) return; // 已经滚动的距离加页面的高度,等于整个内容区域高度时,视为接触底部 console.log('已经滚动距离',$list.scrollTop); console.log('页面的高度',document.body.clientHeight); console.log('内容区域高度',$list.scrollHeight); if ( $list.scrollTop + document.body.clientHeight >= $list.scrollHeight ) { console.log('到底了'); this.isLoading = true; setTimeout(()=>{ this.arrayItem = 200; this.isLoading = false; },2000) } }); },
或者
<div class="daily-list" ref="list" @scroll="handleScroll">
<template>
<div v-for="(item,index) in arrayItem" :key="index">
<div>{{item}}</div>
</div>
</template>
</div>
methods: {
handleScroll(){
const $list = this.$refs.list;
if (this.isLoading) return;
if
(
$list.scrollTop
+ document.body.clientHeight
>= $list.scrollHeight
)
{
console.log('到底了');
this.isLoading = true;
setTimeout(()=>{
this.arrayItem = 200;
this.isLoading = false;
},2000)
}
}
}
![](https://img2020.cnblogs.com/blog/1636551/202105/1636551-20210524094005735-1789257639.png)
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue框架,数据展示和分析,报告管理界面
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Easy Mock以及Vue+Mock.js模拟数据
- springboot+vue实现前后端分离之后端spring部分(spring boot 2.5.4/vue.js 3.2.4)
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue页面交互-弹窗关闭后刷新父页面时取消选中数据展示列表里的复选框
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
- 在vue中的form表单中下拉框中的数据来自数据库查询到的数据
- vue中axios的深入使用
- 084:vue+openlayers数据聚合 ( 代码示例 )
- 在vue中利用echarts整理数据结构,将数据进行可视化操作,制成echarts条形图,柱状图,圆饼图