HTML結(jié)構(gòu)
<body>
<div id="app">
<header id="header">
<input type="text" id="input">
<input type="submit" id="submit">
</header>
<article id="article">
<ul id="ul">
<li class="li" id="text">下拉刷新</li>
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
<li class="li">6</li>
<li class="li">7</li>
<li class="li">8</li>
<li class="li">9</li>
<li class="li">10</li>
</ul>
</article>
</div>
</body>
CSS設(shè)置
#article{
overflow: scroll;
position: relative;
}
#ul{
position: absolute;
}
上拉加載
let ul = document.getElementById('ul'); // 獲取ul列表
let div = document.getElementById('article') // 獲取包裹ul列表的div(css: overflow:scroll;)
let num = 11; // 要添加的li文本，可自定義
let isLoad = false; // 節(jié)流閥輔助變量
// 添加li的方法，可自定義
function addLi() {
let fragment = document.createDocumentFragment();
for(let i=0;i<10;i++) {
let li = document.createElement('li');
li.className = 'li';
li.innerHTML = num++;
fragment.appendChild(li); // 用DocumentFragment提高渲染速度
}
ul.appendChild(fragment);
}
// 上拉加載
div.addEventListener('scroll',function(){
if(div.scrollHeight-div.scrollTop<1000 && isLoad===false) {
isLoad = true;
addLi();
setTimeout(function(){
isLoad = false;
},300) // 節(jié)流閥
}
},false);
下拉刷新
let ul = document.getElementById('ul'); // 獲取ul列表
let div = document.getElementById('article') // 獲取包裹ul列表的div(css: overflow:scroll;)
let text = document.getElementById('text'); // 寫著“下拉刷新”的元素
let start; // 輔助變量：觸摸開始時，相對于文檔頂部的Y坐標
let refresh = false; // 輔助變量：是否刷新
div.addEventListener('touchstart',function(event){
let touch = event.touches[0];
start = touch.pageY; // 輔助變量：觸摸開始時，相對于文檔頂部的Y坐標
},false);
div.addEventListener('touchmove',function(event){
// 下拉刷新
let touch = event.touches[0];
if(div.scrollTop<=0){
// 如果ul列表到頂部，修改ul列表的偏移,顯示“下拉刷新”，并準備觸發(fā)下拉刷新功能，可自定義
ul.style.top = ul.offsetTop + touch.pageY - start +'px'; // ul.style.top = ul.offsetTop + 'px'
start = touch.pageY;
// 若ul偏移量過大,則修改文字,refresh置為true,配合'touchend'刷新
if(ul.offsetTop>=100) {
text.innerHTML = "釋放刷新";
refresh = true;
}
}
},false);
div.addEventListener('touchend',function(event){
// 若'touchend'時，ul偏移,用setInterval循環(huán)恢復(fù)ul的偏移量
if(ul.offsetTop>=0) {
let time = setInterval(function(){
ul.style.top = ul.offsetTop -3 +'px';
// 若ul的偏移量恢復(fù)，clearInterval
if(ul.offsetTop<=0){
clearInterval(time);
text.innerHTML = "下拉刷新";
// 若恢復(fù)時'refresh===true',刷新頁面
if(refresh){
location.reload();
}
}
})
}
},false);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
