Vue 列表懒加载触底加载

一、方法一

描述：列表懒加载+节流
效果图：

实现：
组件：LazyLoading

<template><div class="lazy-list"><slot></slot></div>
</template>
<script>
export default {name: "LazyLoading",data() {return {};},methods: {// 懒加载handleScroll(event) {// 标准浏览器中：定义一个形参event，但当事件触发的时候，并没有给event赋实际的值，// 则浏览器会把”事件“的对象赋给这个形参e，这时这个e是个系统级的对象：事件；const scrollDistance =// 正文全文高event.target.scrollHeight -// 被卷去的高event.target.scrollTop -// 可见区域的宽度event.target.clientHeight;// 滚动条距离底部小于等于0证明已经到底了，可以请求接口了if (scrollDistance <= 0) {this.$emit("onButtomBy");//到底了}},// 节流throttle(fn, wait) {let context, args;let previous = 0;return function () {let now = +new Date();context = this;args = arguments; // 取throttle执行作用域的thisif (now - previous > wait) {fn.apply(context, args); // 用apply指向调用throttle的对象，相当于throttle.fn(args);previous = now;}};},throttleFun(event) {this.throttle(this.handleScroll(event), 1000);},},mounted() {// 注册 滚动事件window.addEventListener("scroll", this.throttleFun, true);},
};
</script><style >
.lazy-list {/* 注意：懒加载必须设置 列表容器的高度哈 *//* height: calc(100% - 200px); */height: 100%;overflow: auto;
}
</style>

注意：如果 懒加载组件 是被包裹在 keep-alive 下的话，会被缓存，需要在 deactivated 钩子中对 scroll 事件进行解绑
参考：https://blog.csdn.net/qq_24930411/article/details/107252548

deactivated() {window.removeEventListener("scroll", this.throttleFun, true);
},

列表页面引用懒加载组件：
import LazyLoading from "./LazyLoading.vue";

<template><div class="refresh-list-extend-con"><lazy-loading @onButtomBy="onButtomBy"><div v-for="(item, index) in listBody" :key="index" class="item-con"><div class="item"></div></div></lazy-loading></div>
</template>
<script>
import LazyLoading from "./LazyLoading.vue";
export default {name: "HomeList",components: {LazyLoading,},data() {return {listBody: [{}, {}, {}, {}, {}, {}, {}, {}],pages: 1, // 数据总页数current: 1, // 当前页数onOff: false, // 节流标识};},methods: {// 加载数据loadTaksData() {// todo 调用接口获取数据给 items 对象赋值let params = {current: this.current,size: 8,};console.log("接口参数为：", params);/* // 调用接口的方法this.xxxx(params).then((res)=>{console.log('接口返回的数据为:', res);this.items = res.body.records;// todo 接口返回后需要将 节流标识 设置为 this.onOff = falsethis.onOff = false;// todo 当前页数和总页数在第一次请求数据就要保存起来this.pages = res.body.pages;})*/// 临时数据this.listBody = [{}, {}, {}, {}, {}, {}, {}, {}]; //当前页数据this.pages = 4; //总页数this.onOff = false;},// 到底了onButtomBy() {//这个开关是为了避免请求数据中 再次被请求if (this.onOff) return;this.onOff = true;//当前页数小于总页数 就请求if (this.current < this.pages) {this.current += 1;this.loadTaksData();}},},created() {this.loadTaksData();},
};
</script>
<style>
.refresh-list-extend-con {width: 300px;height: 300px;border: 1px solid #ccc;overflow-y: auto;
}
.item-con .item {width: 100px;height: 50px;background: #f5f5f5;margin: 10px 0;
}
</style>

打印参数如下：

二、方法二

描述：一个简单的适用于 Vue 的下拉刷新，触底加载组件

效果图：

实现：

组件： RefreshList 代码：

<template><divclass="list-warp-template"@touchstart="handlerStart"@touchend="handlerEnd"@touchmove="handlerMove"@scroll="handlerScroll"ref="listWrapRef"><div class="top-refresh" :style="{ height: refresh.height + 'px' }"><div v-show="refresh.height > 30">{{ refreshLoading ? "刷新中" : "松开刷新" }}</div></div><div class="main-list"><slot></slot></div><div class="bottom-loading" v-show="bottomLoading">加载中</div></div>
</template>
<script>
let timer = null;
export default {name: "RefreshList",props: {refreshLoading: {type: Boolean,default: false,},},data() {return {position: 0,startInit: 0,bottomLoading: false,refresh: {height: 0,},};},created() {},watch: {refreshLoading(val) {if (!val) {this.refresh.height = 0;}},},computed: {},mounted() {},methods: {handlerScroll(e) {const eDom = e.target;const scrollTop = e.target.scrollTop;// 判断是否到底了let scrollPosition = eDom.scrollHeight - e.target.offsetHeight;if (timer) {clearTimeout(timer);}timer = setTimeout(() => {this.bottomLoading = true;if (scrollPosition <= scrollTop) {this.$emit("on-bottom"); //到底了}}, 200);this.position = scrollTop;// 滚动事件，返回当前滚动位置this.$emit("on-scroll", scrollPosition);},// 返回顶部handlerBackTop() {const dom = this.$refs.listWrapRef;dom.scrollTop = 0;},// 触摸开始handlerStart(e) {this.startInit = parseInt(e.touches[0].clientY);},// 滑动中,下拉handlerMove(e) {if (this.position === 0 && !this.refreshLoading) {const Y = parseInt(e.touches[0].clientY);const range = Y - this.startInit;this.refresh.height = range;}},// 滑动结束handlerEnd() {if (this.refresh.height >= 30) {this.refresh.height = 40;this.$emit("on-refresh");this.$emit("update:refreshLoading", true);} else {this.refresh.height = 0;}this.startInit = 0;},},
};
</script><style >
.list-warp-template {display: block;/* height: 100vh; */height: 100%;overflow-y: auto;
}
.top-refresh {background-color: #ccc;height: 0;width: 100%;transition: height 0.1s linear;overflow: hidden;color: #fff;display: flex;align-items: center;justify-content: center;
}.main-list {width: 100%;
}.bottom-loading {height: 40px;display: flex;align-items: center;justify-content: center;color: #999;width: 100%;background-color: #f0f0f0;
}
</style>

列表页面：
引入懒加载组件：import RefreshList from "./refreshList.vue";

<template><div class="refresh-list-con"><refresh-list @on-bottom="onBotttom"><div v-for="(item, index) in listBody" :key="index" class="item-con"><div class="item"></div></div></refresh-list></div>
</template><script>
import RefreshList from "./refreshList.vue";export default {name: "HomeRefresh",props: {},components: {RefreshList,},data() {return {listBody: [{}, {}, {}, {}, {}, {}, {}, {}],};},methods: {// 到底了onBotttom() {console.log("触底加载...");},},created() {},
};
</script><style  scoped>
.refresh-list-con {width: 300px;height: 300px;border: 1px solid #ccc;overflow-y: auto;
}.item-con .item {width: 100px;height: 50px;background: #f5f5f5;margin: 10px 0;
}
</style>

备注

1、Vue3 手写一个简单的触底刷新:

利用 addEventListener 来监听视图层的高度，还有滚动条的高度

const handleScroll = () => {window.addEventListener("scroll", () => {let scrollTop = document.documentElement.scrollTop || document.body.scrollToplet windowHeight = document.documentElement.clientHeight || document.body.clientHeightlet scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeightif (scrollTop + windowHeight == scrollHeight) {console.log("到了底部")getOrderList()}})
}
onMounted(() => {handleScroll()
})
onBeforeUnmount(() => {window.removeEventListener("scroll", () => {})
})

注意：离开前不要忘记销毁

2、

Vue 列表懒加载触底加载相关推荐

列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...
微信小程序开发使用onreachBottom实现页面触底加载及分页
目录一简要介绍一下onreachBottom事件二实例展示三遇到的一些问题一简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样, ...
vue-infinite-scroll 实现触底加载
说明如果项目中需要实现触底加载,可以使用vue-infinite-scroll来实现. 安装通过下面的命令可以进行安装: npm install vue-infinite-scroll -S 配置 ...
微信小程序04---头像上传、瀑布流、下拉刷新、触底加载更多、分包
目录一.头像上传 1.选择图片 wx.chooseImage() 2.上传文件 wx.uploadFile() 二.瀑布流+下拉刷新+触底加载三.分包加载什么是分包为什么要使用分包如 ...
lin-ui实现瀑布流的触底加载
触底加载效果实现思路触底加载更多的细节: 触底: 监测触底事件在触底之后执行一系列动作加载数据: 在触底后需要向服务器请求数据,如果已经请求到了所有数据,应该不再发送请求. 加载状态: 请求数据 ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
uniapp触底加载
文章目录一.onReachBottom()函数首先,在page.json的style下设置然后在页面使用即可,与生命周期函数同一级别二.在子组件中使用滚动区域scrow-view触底加载 1. ...
swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...

Vue 列表懒加载触底加载

一、方法一

二、方法二

效果图：

实现：

备注

1、Vue3 手写一个简单的触底刷新:

2、

Vue 列表懒加载触底加载相关推荐

最新文章

热门文章

Vue 列表 懒加载 触底加载

一、方法一

二、 方法二

效果图：

实现：

备注

1、Vue3 手写一个简单的触底刷新:

2、

Vue 列表 懒加载 触底加载相关推荐

最新文章

热门文章

Vue 列表懒加载触底加载

二、方法二

Vue 列表懒加载触底加载相关推荐