欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能

 更新時(shí)間:2015年03月13日 14:19:13   投稿:hebedich  
這篇文章主要介紹了純javascript實(shí)現(xiàn)簡(jiǎn)單下拉刷新功能,沒(méi)有借助任何的框架,十分簡(jiǎn)單實(shí)用,有需要的小伙伴來(lái)參考下吧。

代碼很簡(jiǎn)單,實(shí)現(xiàn)的功能卻很實(shí)用,直接奉上代碼

CSS:

復(fù)制代碼 代碼如下:

<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:

復(fù)制代碼 代碼如下:

<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能夠有所幫助。

相關(guān)文章

  • script的async屬性以非阻塞的模式加載腳本

    script的async屬性以非阻塞的模式加載腳本

    HTML5實(shí)現(xiàn)了script的async屬性,這個(gè)新的屬性可以讓js在瀏覽器中以非阻塞的模式加載,接下來(lái)介紹如何應(yīng)用此屬性,感興趣的朋友可以了解下
    2013-01-01
  • webpack的移動(dòng)端適配方案小結(jié)

    webpack的移動(dòng)端適配方案小結(jié)

    移動(dòng)端開(kāi)發(fā)的過(guò)程中,一個(gè)最常見(jiàn)的問(wèn)題就是適配不同的屏幕寬度。本文主要介紹了webpack的移動(dòng)端適配方案,感興趣的可以了解一下
    2021-07-07
  • js 彈出對(duì)話框(遮罩)透明,可拖動(dòng)的簡(jiǎn)單實(shí)例

    js 彈出對(duì)話框(遮罩)透明,可拖動(dòng)的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇js 彈出對(duì)話框(遮罩)透明,可拖動(dòng)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • 微信小程序?qū)崿F(xiàn)彈幕墻(祝福墻)

    微信小程序?qū)崿F(xiàn)彈幕墻(祝福墻)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈幕墻、祝福墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條

    微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條

    本篇文章主要介紹了微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    filter也是一個(gè)常用的操作,它用于把Array的某些元素過(guò)濾掉,然后返回剩下的元素。下面通過(guò)實(shí)例代碼給大家簡(jiǎn)答介紹下javascript中的filter,需要的的朋友參考下吧
    2017-06-06
  • 理解JavaScript中的Proxy 與 Reflection API

    理解JavaScript中的Proxy 與 Reflection API

    這篇文章主要介紹了JavaScript中的Proxy 與 Reflection API的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下
    2020-09-09
  • JavaScript駕馭網(wǎng)頁(yè)-獲取網(wǎng)頁(yè)元素

    JavaScript駕馭網(wǎng)頁(yè)-獲取網(wǎng)頁(yè)元素

    這篇文章主要介紹了JavaScript駕馭網(wǎng)頁(yè)-獲取網(wǎng)頁(yè)元素的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • JavaScript單鏈表詳解與實(shí)現(xiàn)

    JavaScript單鏈表詳解與實(shí)現(xiàn)

    鏈表是一種數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)和組織一系列元素,這些元素以節(jié)點(diǎn)的形式連接在一起,每個(gè)節(jié)點(diǎn)包含數(shù)據(jù)和一個(gè)指向下一個(gè)節(jié)點(diǎn)的引用,鏈表可以分為單鏈表、雙鏈表和循環(huán)鏈表等不同類型,但在本文中,我們將重點(diǎn)關(guān)注單鏈表,需要的朋友可以參考下
    2023-09-09
  • 關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測(cè)試

    關(guān)于scrollLeft,scrollTop的瀏覽器兼容性測(cè)試

    彈窗在谷歌瀏覽器chrome下的位置跟在別的瀏覽器下不一樣,接下來(lái)介紹下scrollLeft,scrollTop的瀏覽器兼容性,感興趣的你可以參考下哈
    2013-03-03

最新評(píng)論