基於iscroll實現下拉和上拉重新整理

這裡，我基於iscroll5的基礎上，進行了少量的改動源**，進而實現了下拉屬性的功能，所以分享在這裡，僅供參考。

iscroll外掛程式（官網位址）當前最新的版本是version 5版本，相對於版本4，我個人覺得，版本5變得更具有靈活性，雖然移除了一些特定的事件，特定的對外介面，但是對於使用該外掛程式的程式設計師們，這個外掛程式變得更具有操控性，這是我比較喜歡的一種外掛程式型別，但同時，也發現了一些問題，事件中的touchend事件，不存在了（確切的說，不能說是不存在），只是被攔截了，所以一些基本的事件，都被進行了攔截，而導致無法監聽到touchend事件，只能檢測到scrollend事件，scrollend事件，是在頁面滾動停止時，才會被觸發的，所以~~

所以，根據版本5，無法檢測到，是不是下拉了一段距離之後，鬆開時的動作了，對此，我也檢查了源**，也沒有發現這個功能的實現方法，不得已，只能對源**進行了少量的修改，所以就有了本篇文章。

基本上，該方法並沒有進行多少的修改，只是新增了兩個事件的監聽型別，乙個叫做「slidedown」，表示下拉被觸發，另乙個叫做「slideup」，表示上拉被觸發。

其他，例項化中，各屬性都沒有進行更改，所以，關於iscroll的使用，直接參考官網的說明：iscroll官網。

這裡，我只對新新增的事件，新增乙個demo測試，這個demo是乙個很簡單的demo，也只是用來說明新新增事件的用法的，如果需要用到下拉重新整理或者上拉重新整理的朋友，可以根據本demo自行修改。

span>

下拉重新整理span>

div>

pretty row 1li>

pretty row 2li>

pretty row 3li>

pretty row 4li>

pretty row 5li>

...pretty row 46li>

pretty row 47li>

pretty row 48li>

pretty row 49li>

pretty row 50li>

ul>

div>

span>

上拉重新整理span>

div>

css部分這裡就不多說了，有興趣的可以直接儲存該網頁，然後把相關**分離即可，對應的js和css**，分別為iscroll.js和iscroll.css檔案，其他的bootstrap和jquery都是我懶的原因，加入的框架。

對上述的結構進行例項化：

var myscroll,
upicon = $("#up-icon"),
downicon = $("#down-icon");
//probetype屬性，表明此外掛程式，可以監聽scroll事件
myscroll.on("scroll",function()else if(y < 40 && y > 0)
if(maxy >= 40)else if(maxy < 40 && maxy >=0)
});myscroll.on("slidedown",function()
});myscroll.on("slideup",function()
});

同時，注意一點，當你使用ajax新增或者刪除一些新的元素時，要重新myscroll.refresh()一下，會重新計算maxscrolly區域的，以保證區域覆蓋的正確性，這些東西，如果你真的使用到，那麼肯定可以碰到這些問題的，所以，這裡是我話多了~~~

ok，**就是這樣了，在寫這個文章的時候，旁邊沒有android的裝置，所以，沒有進行測試，只測試了ios8的裝置，所以，如果有問題，請指出，謝謝~~

我的本意是把這個方法，寫成乙個基於iscroll的外掛程式，但當前還沒有完成，所以現在只給出乙個最簡單demo，待我閒暇時間，把該外掛程式進行完善一下。

如有問題，也請不吝指教，謝謝！

基於iscroll實現下拉和上拉重新整理

H5基於iScroll實現下拉重新整理，上拉載入更多

iscroll5實現下拉載入更多

利用iscroll實現上拉載入下拉重新整理

基於iscroll實現下拉和上拉重新整理

H5基於iScroll實現下拉重新整理，上拉載入更多

iscroll5實現下拉載入更多

利用iscroll實現上拉載入下拉重新整理

相關推薦