原生js实现上滑加载，下拉刷新

2023-11-12 06:37| 来源: 网络整理| 查看: 265

这是手机端常见的一个功能，可能很多人都是用框架或者插件实现。这里，我试着用原生js实现。这样能更明白原理与底层实现

首先，布局，模拟初始数据 Document body { margin: 0; } html, body { height: 100%; } header, footer { width: 100%; height: 40px; position: absolute; left: 0; text-align: center; line-height: 40px; background: #999999; color: #ffffff; z-index: 999; } header { top: 0; } footer { bottom: 0; } ul { display: block; width: 100%; position: absolute; top: 40px; bottom: 40px; overflow: auto; list-style: none; padding: 0; margin: 0; } ul>li { width: 100%; height: 40px; line-height: 40px; text-indent: 20px; border-bottom: 1px solid #666666; background: #ffffff; color: #333333; } /* 下拉刷新的时候做 */ #loading{ width: 100%; height: 40px; line-height: 40px; text-align: center; color: #333333; transition: all 0.5s; position: absolute; z-index: 1; color: #ffffff; background: orange; top: 0; } 我是头部加载中...... 已加载全部数据我是尾部 //获取数据 var list = document.getElementById("list"); function getData() { var html = ''; for (var i = 0; i //初始请求数据 getData(); }

会得到这样一个网页，头部底部固定，中间部分可滑动在这里插入图片描述

接下来，我们来监听ul的滚动事件 list.addEventListener("scroll", function () { //这里可以获取到ul距离屏幕顶部的距离，每次滚动都会刷新 console.log(this.scrollTop); }) 来做一个分析，接下来不要着急写代码

在这里插入图片描述看到这个图，我们就知道要做什么了

//ul的高度不变的定死的 let listH = list.clientHeight; //所有li总高度 let contentH = this.childNodes.length * 41; //差值 let diffValue = contentH - listH; //距离视窗还有50的时候，开始触发； if (this.scrollTop + 50 >= diffValue) { console.log('该加载了...') getData(); }

上滑加载完美实现,当我滑到快到最后一个li的时候，触发获取数据的方法我们再添加一个节流阀，不让它无限加载。

function getData() { var html = ''; for (var i = 0; i list.innerHTML = html; } else if(length > 0 && length console.log("已经到底了，别拉了"); } }

这里有两个非常重要的方法，都是原生js操作

1.字符串dom化

//字符串dom化 function parseDom(arg) { var objEle = document.createElement("div"); objEle.innerHTML = arg; return [...objEle.childNodes]; };

2.在已有元素后面插入元素

//在已有元素后面插入元素 function insertAfter(newElement, targetElement) { newElement.forEach(element => { //在后面插入元素 after:js新的dom api targetElement.after(element) }); return } 下拉加载

通过判断ul的scrollTop值，当ul的scrollTop === 0的时候，触发添加到监听滚动事件里，加一些样式操作即可有些许粗糙，功能为主，见谅见谅

if(this.scrollTop === 0){ list.style.top = "80px"; loading.style.top = "40px"; //刷新数据 setTimeout(()=>{ loading.style.top = "0"; list.style.top = "40px"; },1000) } 那么完整代码就是 Document body { margin: 0; } html, body { height: 100%; } header, footer { width: 100%; height: 40px; position: absolute; left: 0; text-align: center; line-height: 40px; background: #999999; color: #ffffff; z-index: 999; } header { top: 0; } footer { bottom: 0; } ul { display: block; width: 100%; position: absolute; top: 40px; bottom: 40px; overflow: auto; list-style: none; padding: 0; margin: 0; } ul>li { width: 100%; height: 40px; line-height: 40px; text-indent: 20px; border-bottom: 1px solid #666666; background: #ffffff; color: #333333; } /* 下拉刷新的时候做 */ #loading,#loadEnd{ width: 100%; height: 40px; line-height: 40px; text-align: center; color: #333333; transition: all 0.5s; position: absolute; z-index: 1; color: #ffffff; } #loading{ background: orange; top: 0; } #loadEnd{ background: green; bottom: 0; } 我是头部加载中...... 已加载全部数据我是尾部 //获取数据 var list = document.getElementById("list"); var loading = document.getElementById("loading"); var loadEnd = document.getElementById("loadEnd"); function getData() { var html = ''; for (var i = 0; i list.innerHTML = html; } else if(length > 0 && length console.log("已经到底了，别拉了"); list.style.bottom = "80px"; loadEnd.style.bottom = "40px"; //加个定时器模拟接口请求结束隐藏掉此条 //或者可以插入一条元素 } } //字符串dom化 function parseDom(arg) { var objEle = document.createElement("div"); objEle.innerHTML = arg; return [...objEle.childNodes]; }; //在已有元素后面插入元素 function insertAfter(newElement, targetElement) { newElement.forEach(element => { //在后面插入元素 js 新的dom api targetElement.after(element) }); return } //初始加载函数 window.onload = () => { //初始请求数据 getData(); list.addEventListener("scroll", function () { //ul的高度不变的定死的 let listH = list.clientHeight; //所有li总高度 let contentH = this.childNodes.length * 41; //下拉刷新 if(this.scrollTop === 0){ list.style.top = "80px"; loading.style.top = "40px"; //刷新数据 setTimeout(()=>{ loading.style.top = "0"; list.style.top = "40px"; },1000) } //距离 let diffValue = contentH - listH; //ul离顶部的距离 //距离视窗还有50的时候，开始触发； if (this.scrollTop + 50 >= diffValue) { console.log('该加载了...') getData(); } }) }

此篇文章为作者原创如需转载请注明出处

【本文地址】

公司简介

联系我们