原生js實現下拉重新整理和上拉載入更多
阿新 • • 發佈：2022-01-18
本文例項為大家分享了實現下拉重新整理和上拉載入更多的具體程式碼，供大家參考，具體內容如下
1.下拉重新整理
由於原生js太久不用了,這裡列一下此處涉及到的前置知識點:
移動端觸屏事件: touchstart(手指按下的一瞬間),touchmove(手指在螢幕上移動時),touchend(手指鬆開時)
手指在頁面上的座標: pageX,pageY
寫之前首先要懂原理,下拉重新整理的本質就是使用者在頁面頂部進行上拉動作時拉到一定的距離觸發資料重新整理.
大概需要做的幾個點:
1.在手指按下時(touchstart)記錄手指的按下位置
2.在手指下滑時(touchmove)計算手指的座標離手指按下時初始位置的差值得出下滑的距離,讓容器順應手指下滑的方向移動(translateY)對應差值的距離,對應的給一個允許使用者下滑的最大距離,避免頁面下拉過長.
3.在手指鬆開時(touchend)判斷下滑的差值是否達到預期的值來進行對應的重新整理資料和回彈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/">
* {
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>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
&www.cppcns.com
效果如圖所示:
2.上拉載入
前置js知識點: 三個dom屬性
*clientHeight:不包含邊框的元素可視區高度
*scrollTop:元素滾動時捲上去的距離
*scrollHeight: 元素實際高度,包含捲上去的高度
知道了上述三個屬性後,於是就有了一個公式:
clientHeight + scrollTop <= scrollHeight - 觸底的指定距離
然後就是上拉載入的原理:
通過監聽元素的滾動事件(scroll)判斷元素是否滾動到了距離底部指定距離時觸發載入資料
知道了原理和三者之間的關係後,我們就知道只需要判斷這個公式即可知道滾動條有沒有進入觸底距離,話不多說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,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>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
meDjFN <li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
<li>我是內容</li>
</section>
</section>
</body>
<script type="text/script" defer="defer">
// 滾動容器
const container = document.querySelector('.container');
// 監聽滾動事件
container.addEventListener('scroll',_.debounce(function (e) {
// 當元素的可視高度+滾入的距離>=元素真實高度-觸底距離時,觸發載入更多
if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {
setTimeout(() => {
// 這裡是一個非同步載入資料的操作
console.log('載入更多')
},1000);
}
},700))
</script>
</html>
效果如圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。