原生js實現(xiàn)下拉刷新和上拉加載更多

更新時間：2022年01月16日 12:19:11 作者：Suk_阿易

這篇文章主要為大家詳細介紹了原生js實現(xiàn)下拉刷新和上拉加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)下拉刷新和上拉加載更多的具體代碼，供大家參考，具體內(nèi)容如下

1.下拉刷新

由于原生js太久不用了,這里列一下此處涉及到的前置知識點:

移動端觸屏事件: touchstart(手指按下的一瞬間),touchmove(手指在屏幕上移動時),touchend(手指松開時)

手指在頁面上的坐標: pageX,pageY

寫之前首先要懂原理,下拉刷新的本質(zhì)就是用戶在頁面頂部進行上拉動作時拉到一定的距離觸發(fā)數(shù)據(jù)刷新.

大概需要做的幾個點:

1.在手指按下時(touchstart)記錄手指的按下位置

2.在手指下滑時(touchmove)計算手指的坐標離手指按下時初始位置的差值得出下滑的距離,讓容器順應手指下滑的方向移動(translateY)對應差值的距離,對應的給一個允許用戶下滑的最大距離,避免頁面下拉過長.

3.在手指松開時(touchend)判斷下滑的差值是否達到預期的值來進行對應的刷新數(shù)據(jù)和回彈loading.

less word,show me the code...

<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport"
? ? ? ? content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
? ? <title>Document</title>
? ? <style type="text/css">
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
?
? ? ? ? .container {
? ? ? ? ? ? /* 容器原始位置向上移動60px,隱藏掉loading盒子,下拉時才顯示出來 */
? ? ? ? ? ? position: relative;
? ? ? ? ? ? top: -100px;
? ? ? ? }
?
? ? ? ? .container .loading {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? line-height: 100px;
? ? ? ? }
?
? ? ? ? .container .list {
? ? ? ? ? ? border: 1px solid #666;
? ? ? ? }
?
? ? ? ? .container .list li {
? ? ? ? ? ? line-height: 80px;
? ? ? ? }
?
? ? ? ? .container .list li:nth-child(2n) {
? ? ? ? ? ? background-color: #ccc;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <section class="container">
? ? ? ? <section class="loading">
? ? ? ? ? ? <span>下拉刷新</span>
? ? ? ? </section>
? ? ? ? <section class="list">
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? </section>
? ? </section>
</body>
<script type="text/javascript">
? ? // 滾動容器
? ? const container = document.querySelector('.container');
? ? // loading文字容器
? ? const span = container.querySelector('span');
? ? let startPosition = 0;// 下拉的開始位置
? ? let distance = 0;// 下拉距離的差值
? ? // 手指按下時
? ? container.addEventListener('touchstart', function (e) {
? ? ? ? // 在回彈后的下一次下拉按下時重置loading文本
? ? ? ? span.textContent = '下拉刷新';
? ? ? ? // 記錄開始位置
? ? ? ? startPosition = e.touches[0].pageY;
? ? })
? ? // 手指移動時
? ? container.addEventListener('touchmove', function (e) {
? ? ? ? // 計算下拉差值
? ? ? ? const currentPosition = e.touches[0].pageY;
? ? ? ? // 計算下拉后離開始位置的差值
? ? ? ? distance = currentPosition - startPosition;
? ? ? ? // 如果下拉差值達到,則提示可以松手了 這個達到的具體值這里是取的下拉出來的區(qū)域高度
? ? ? ? if (distance > 100) {// 案例以100為臨界值,超過了100的距離就提示釋放刷新
? ? ? ? ? ? span.textContent = '釋放刷新';
? ? ? ? }
? ? ? ? // 限制下滑的最大值為120,超過就不再下滑
? ? ? ? if (distance < 120) {
? ? ? ? ? ? // 容器的這個下滑是瞬時的 取消過渡效果
? ? ? ? ? ? this.style.transition = 'transform 0s';
? ? ? ? ? ? this.style.transform = `translateY(${distance}px)`
? ? ? ? }
? ? })
? ? // 手指松開時
? ? container.addEventListener('touchend', function (e) {
? ? ? ? // 回彈的動作可以給個1s的過渡效果
? ? ? ? this.style.transition = 'transform 1s';
? ? ? ? // 如果下拉差值并沒有達到 則直接回彈
? ? ? ? if (distance > 0 && distance < 100) {
? ? ? ? ? ? this.style.transform = `translateY(0px)`
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? if (distance > 100) {
? ? ? ? ? ? // 下拉差值達到了就顯示刷新中,并暫時定格在這個位置
? ? ? ? ? ? this.style.transform = `translateY(100px)`;
? ? ? ? ? ? span.textContent = '刷新中';
? ? ? ? ? ? // 等數(shù)據(jù)回來后顯示刷新成功1s然后再回彈 到這里本次整個下拉執(zhí)行完畢
? ? ? ? ? ? setTimeout(() => {// setTimeout模擬異步請求 真實開發(fā)這里是一個promise請求
? ? ? ? ? ? ? ? span.textContent = '刷新成功';
? ? ? ? ? ? ? ? // 這個setTimeout讓刷新成功顯示一秒后再回彈
? ? ? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? ? ? this.style.transform = `translateY(0px)`
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? }, 2000);
? ? ? ? }
? ? ? ? // 一次下拉結(jié)束后重置差值
? ? ? ? distance = 0;
? ? })
</script>
?
</html>

效果如圖所示:

2.上拉加載

前置js知識點: 三個dom屬性
*clientHeight:不包含邊框的元素可視區(qū)高度

*scrollTop:元素滾動時卷上去的距離

*scrollHeight: 元素實際高度,包含卷上去的高度

知道了上述三個屬性后,于是就有了一個公式:

clientHeight + scrollTop <= scrollHeight - 觸底的指定距離

然后就是上拉加載的原理:

通過監(jiān)聽元素的滾動事件(scroll)判斷元素是否滾動到了距離底部指定距離時觸發(fā)加載數(shù)據(jù)

知道了原理和三者之間的關系后,我們就知道只需要判斷這個公式即可知道滾動條有沒有進入觸底距離,話不多說show code~

<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport"
? ? ? ? content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
? ? <title>Document</title>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
? ? <style type="text/css">
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
?
? ? ? ? .container {
? ? ? ? ? ? height: 100vh;
? ? ? ? ? ? overflow-y: scroll;
? ? ? ? }
?
? ? ? ? .container .list {
? ? ? ? ? ? border: 1px solid #666;
? ? ? ? }
?
? ? ? ? .container .list li {
? ? ? ? ? ? line-height: 80px;
? ? ? ? }
?
? ? ? ? .container .list li:nth-child(2n) {
? ? ? ? ? ? background-color: #ccc;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <section class="container">
? ? ? ? <section class="list">
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? ? ? <li>我是內(nèi)容</li>
? ? ? ? </section>
? ? </section>
</body>
<script type="text/javascript" defer="defer">
? ? // 滾動容器
? ? const container = document.querySelector('.container');
? ? // 監(jiān)聽滾動事件
? ? container.addEventListener('scroll', _.debounce(function (e) {
? ? ? ? // 當元素的可視高度+滾入的距離>=元素真實高度-觸底距離時,觸發(fā)加載更多
? ? ? ? if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? // 這里是一個異步加載數(shù)據(jù)的操作
? ? ? ? ? ? ? ? console.log('加載更多')
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? }, 700))
</script>
?
</html>

效果如圖：