這是html5下拉刷新和上拉加載更多下載,現(xiàn)在已經(jīng)不是純Android獨霸天下的時代了,H5嵌入Android的Hybrid混合開發(fā)是大勢所趨。今天給大家?guī)淼木褪且苿佣酥谐R姷?ldquo;上拉刷新,下拉加載”特效,這個特效將會基于H5來實現(xiàn)。
html5下拉刷新和上拉加載更多是前一段有個手機端的項目需要用到下拉刷新和上拉加載更多的效果,腦海里第一反映就是微博那種效果,剛開始的理解有些偏差,以為下拉也是追加數(shù)據(jù),上拉也是追加數(shù)據(jù),后請教同事后發(fā)現(xiàn)其實下拉只是刷新最新數(shù)據(jù)而已,上拉是追加數(shù)據(jù)。
1、引用iScroll.js, 在初始化時添加兩個事件監(jiān)聽:touchMove、DOMContentLoaded。
2、實現(xiàn)iScroll插件的onScrollEnd事件, 也就是在這個事件里調用你自己的ajax方法實現(xiàn)數(shù)據(jù)的刷新和追加。
3、上拉加載更多請求后臺時就相當于分頁請求數(shù)據(jù),這時候需要在ajax請求時發(fā)送pageIndex參數(shù),而初始化加載時需要從后臺返回一個pageCount以便前臺判斷。
4、最關鍵的就是實現(xiàn)下拉刷新方法(pullDownAction)和上拉加載更多(pullUpAction)方法。
html5 實現(xiàn)下拉刷新和下拉加載更多實現(xiàn)分頁功能。