亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Prasanta / 1569人閱讀

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

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

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

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

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

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



    
    
    下拉刷新
    


    

        

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

    

  
 
JS代碼實現(xiàn)

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109042.html

相關(guān)文章

  • 移動端滾動研究

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

    ghnor 評論0 收藏0

  • 移動端下拉刷新原理和實例

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

    jackwang 評論0 收藏0

  • 移動端下拉刷新原理和實例

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

    SoapEye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<