js：基於原生js的上啦下啦刷新功能
阿新 • • 發佈：2019-02-26
列表 overflow 上拉加載 css load() 刷新 set pre absolut
鏈接：https://www.jianshu.com/p/a8392115e6f0
演示地址：http://wonghan.cn/iscroll-demo/
html:
<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:#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; // 節流閥輔助變量
// 添加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) // 節流閥
}
},false);
js:
下拉刷新：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列表的偏移,顯示“下拉刷新”，並準備觸發下拉刷新功能，可自定義
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循環恢復ul的偏移量
if(ul.offsetTop>=0) {
let time = setInterval(function(){
ul.style.top = ul.offsetTop -3 +‘px‘;
// 若ul的偏移量恢復，clearInterval
if(ul.offsetTop<=0){
clearInterval(time);
text.innerHTML = "下拉刷新";
// 若恢復時‘refresh===true‘,刷新頁面
if(refresh){
location.reload();
}
}
})
}
},false); js：基於原生js的上啦下啦刷新功能