成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端下拉刷新頭實(shí)現(xiàn)原理及代碼實(shí)現(xiàn)

Prasanta / 1531人閱讀

摘要：代碼實(shí)現(xiàn)代碼下拉刷新代碼實(shí)現(xiàn)手指觸摸最開(kāi)始的坐標(biāo)手指結(jié)束觸摸時(shí)的坐標(biāo)下拉刷新是否達(dá)到了臨界值釋放立即刷新松開(kāi)手指正在刷新進(jìn)行更新操作，更新結(jié)束后，結(jié)束下拉刷新沒(méi)有滾過(guò)注意的屬性設(shè)置。

下拉刷新實(shí)現(xiàn)原理 
實(shí)現(xiàn)下拉刷新主要分為三步：

監(jiān)聽(tīng)原生touchstart事件，記錄其初始位置的值，e.touches[0].pageY；

監(jiān)聽(tīng)原生touchmove事件，記錄并計(jì)算當(dāng)前滑動(dòng)的位置值與初始位置值的差值，大于某個(gè)臨界值時(shí)，顯示下拉刷新頭，并將頁(yè)面的overflow屬性，設(shè)置為false；

監(jiān)聽(tīng)原生touchend事件，若此時(shí)元素滑動(dòng)已經(jīng)最大值，則進(jìn)行刷新操作，操作結(jié)束后，將頁(yè)面的overflow屬性，設(shè)置為auto。

代碼實(shí)現(xiàn) 
HTML代碼



    
    
    下拉刷新
    


    

        

        
    
            
  • 000
    • 
            
  • 111
    • 
            
  • 222
    • 
            
  • 333
    • 
            
  • 444
    • 
            
  • 555
    • 
            
  • 666
    • 
            
  • 777
    • 
            
  • 888
    • 
            
  • 999
    • 
        

    

  
 
JS代碼實(shí)現(xiàn)

注意 body 的 overflow 屬性設(shè)置。

謝謝您花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，那么不要吝嗇你的贊和Star哈，您的肯定是我前進(jìn)的最大動(dòng)力。https://github.com/YvetteLau/...

關(guān)注小姐姐的公眾號(hào)，和小姐姐一起學(xué)前端。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109042.html

相關(guān)文章

  • 移動(dòng)端滾動(dòng)研究

    摘要：還會(huì)有一個(gè)性能上的問(wèn)題就是當(dāng)頁(yè)面的列表過(guò)長(zhǎng)，元素過(guò)多時(shí)，在模擬滾動(dòng)，下拉刷新這段時(shí)間內(nèi)，頁(yè)面也會(huì)有卡頓現(xiàn)象，這里采取了一個(gè)優(yōu)化策略即列表較長(zhǎng)時(shí)數(shù)量較多時(shí)，在觸發(fā)下拉刷新的時(shí)機(jī)時(shí)將頁(yè)面視窗之外的元素隱藏或者存放在里面。 移動(dòng)web滾動(dòng)問(wèn)題 在移動(dòng)端如果使用局部滾動(dòng)，意思就是我們的滾動(dòng)在一個(gè)固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來(lái)形成div內(nèi)部的...

    ghnor 評(píng)論0 收藏0

  • 移動(dòng)端下拉刷新原理和實(shí)例

    摘要：移動(dòng)端的下拉刷新是一個(gè)很常見(jiàn)的功能，也有許多開(kāi)源庫(kù)實(shí)現(xiàn)了這個(gè)功能，不過(guò)為了學(xué)習(xí)，還是先自己寫一個(gè)例子學(xué)習(xí)一下。 移動(dòng)端的下拉刷新是一個(gè)很常見(jiàn)的功能，也有許多開(kāi)源庫(kù)實(shí)現(xiàn)了這個(gè)功能，不過(guò)為了學(xué)習(xí)，還是先自己寫一個(gè)例子學(xué)習(xí)一下。其中用到了一些touch事件和一些DOM屬性CSS3屬性。直接上代碼，代碼里面有注釋。 Document ...

    jackwang 評(píng)論0 收藏0

  • 移動(dòng)端下拉刷新原理和實(shí)例

    摘要：移動(dòng)端的下拉刷新是一個(gè)很常見(jiàn)的功能，也有許多開(kāi)源庫(kù)實(shí)現(xiàn)了這個(gè)功能，不過(guò)為了學(xué)習(xí)，還是先自己寫一個(gè)例子學(xué)習(xí)一下。 移動(dòng)端的下拉刷新是一個(gè)很常見(jiàn)的功能，也有許多開(kāi)源庫(kù)實(shí)現(xiàn)了這個(gè)功能，不過(guò)為了學(xué)習(xí)，還是先自己寫一個(gè)例子學(xué)習(xí)一下。其中用到了一些touch事件和一些DOM屬性CSS3屬性。直接上代碼，代碼里面有注釋。 Document ...

    SoapEye 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<