純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能
代碼很簡(jiǎn)單,實(shí)現(xiàn)的功能卻很實(shí)用,直接奉上代碼
CSS:
<meta charset="utf-8" />
<title>Pull to Refresh</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<style>
div{
position: absolute;
top:0px;
bottom:0px;
width:100%;
left:0px;
overflow: hidden;
}
li{
list-style-type: none;
height:35px;
background: #ccc;
border-bottom: solid 1px #fff;
text-align: left;
line-height: 35px;
padding-left:15px;
}
ul{
width:100%;
margin-top:0px;
position: absolute;
left:0px;
padding:0px;
top:0px;
}
</style>
HTML:
<div class="outerScroller">
<ul class = 'scroll'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script>
var scroll = document.querySelector('.scroll');
var outerScroller = document.querySelector('.outerScroller');
var touchStart = 0;
var touchDis = 0;
outerScroller.addEventListener('touchstart', function(event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
touchStart = touch.pageY;
console.log(touchStart);
}, false);
outerScroller.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
console.log(touch.pageY + 'px');
scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';
console.log(scroll.style.top);
touchStart = touch.pageY;
touchDis = touch.pageY-touchStart;
}, false);
outerScroller.addEventListener('touchend', function(event) {
touchStart = 0;
var top = scroll.offsetTop;
console.log(top);
if(top>70)refresh();
if(top>0){
var time = setInterval(function(){
scroll.style.top = scroll.offsetTop -2+'px';
if(scroll.offsetTop<=0)clearInterval(time);
},1)
}
}, false);
function refresh(){
for(var i = 10;i>0;i--)
{
var node = document.createElement("li");
node.innerHTML = "I'm new";
scroll.insertBefore(node,scroll.firstChild);
}
}
</script>
以上就是本文的全部?jī)?nèi)容了,希望對(duì)大家學(xué)習(xí)javascript能夠有所幫助。
- 基于iscroll.js實(shí)現(xiàn)下拉刷新和上拉加載效果
- vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
- vue.js整合vux中的上拉加載下拉刷新實(shí)例教程
- Javascript下拉刷新的簡(jiǎn)單實(shí)現(xiàn)
- JS 插件dropload下拉刷新、上拉加載使用小結(jié)
- iscroll.js的上拉下拉刷新時(shí)無(wú)法回彈的解決方法
- dropload.js插件下拉刷新和上拉加載使用詳解
- js仿手機(jī)頁(yè)面文件下拉刷新效果
- JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件
- 原生js仿寫手機(jī)端下拉刷新
相關(guān)文章
js 彈出對(duì)話框(遮罩)透明,可拖動(dòng)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js 彈出對(duì)話框(遮罩)透明,可拖動(dòng)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-07微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條
本篇文章主要介紹了微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
filter也是一個(gè)常用的操作,它用于把Array的某些元素過濾掉,然后返回剩下的元素。下面通過實(shí)例代碼給大家簡(jiǎn)答介紹下javascript中的filter,需要的的朋友參考下吧2017-06-06理解JavaScript中的Proxy 與 Reflection API
這篇文章主要介紹了JavaScript中的Proxy 與 Reflection API的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09JavaScript駕馭網(wǎng)頁(yè)-獲取網(wǎng)頁(yè)元素
這篇文章主要介紹了JavaScript駕馭網(wǎng)頁(yè)-獲取網(wǎng)頁(yè)元素的相關(guān)資料,需要的朋友可以參考下2016-03-03關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測(cè)試
彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣,接下來(lái)介紹下scrollLeft,scrollTop的瀏覽器兼容性,感興趣的你可以參考下哈2013-03-03