基於iscroll實現下拉和上拉重新整理
在原生APP
的開發中,有一個常見的功能,就是下拉重新整理的功能,這個想必大家都是知道的,但是原生APP
的開發,有一個很大的問題就是,你每次更新一些功能,就要使用者重新下載一次版本,尤其是在IOS
系統中,新版本還需要經過稽核才能通過,這就使得版本的更新受到很大的限制,而如果我們改用網頁來展示,那麼只要改變伺服器中網頁的內容,那麼就等於修改了APP
的內容展示,有更靈活的滿足更新版本。
概述
但是有一點就是,如何讓web
實現的頁面,看起來更像是原生的APP
呢,首先要想辦法解決的就是下拉重新整理的功能,對於這個功能,我並沒有在網路上找到很好的解決方法,並且,我個人對手機端的開發,經驗還是有些欠缺,這裡就不羅列使用JS
web
頁下拉重新整理的功能了。
這裡,我基於iscroll5
的基礎上,進行了少量的改動原始碼,進而實現了下拉屬性的功能,所以分享在這裡,僅供參考。
關於iscroll外掛
iscroll
外掛(官網地址)當前最新的版本是version
5
版本,相對於版本4
,我個人覺得,版本5
變得更具有靈活性,雖然移除了一些特定的事件,特定的對外介面,但是對於使用該外掛的程式設計師們,這個外掛變得更具有操控性,這是我比較喜歡的一種外掛型別,但同時,也發現了一些問題,事件中的touchend
事件,不存在了(確切的說,不能說是不存在),只是被攔截了,所以一些基本的事件,都被進行了攔截,而導致無法監聽到touchend
scrollEnd
事件,scrollEnd
事件,是在頁面滾動停止時,才會被觸發的,所以~~
所以,根據版本5
,無法檢測到,是不是下拉了一段距離之後,鬆開時的動作了,對此,我也檢查了原始碼,也沒有發現這個功能的實現方法,不得已,只能對原始碼進行了少量的修改,所以就有了本篇文章。
修改後外掛的使用
基本上,該方法並沒有進行多少的修改,只是添加了兩個事件的監聽型別,一個叫做“slideDown
”,表示下拉被觸發,另一個叫做“slideUp
”,表示上拉被觸發。
其他,例項化中,各屬性都沒有進行更改,所以,關於iscroll
的使用,直接參考官網的說明:iscroll官網。
這裡,我只對新新增的事件,新增一個demo
demo
是一個很簡單的demo
,也只是用來說明新新增事件的用法的,如果需要用到下拉重新整理或者上拉重新整理的朋友,可以根據本demo
自行修改。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
CSS部分這裡就不多說了,有興趣的可以直接儲存該網頁,然後把相關程式碼分離即可,對應的JS
和CSS
程式碼,分別為iscroll.js
和iscroll.css
檔案,其他的bootstrap
和jquery
都是我懶的原因,加入的框架。
對上述的結構進行例項化:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
同時,注意一點,當你使用ajax
新增或者刪除一些新的元素時,要重新myScroll.refresh()
一下,會重新計算maxScrollY
區域的,以保證區域覆蓋的正確性,這些東西,如果你真的使用到,那麼肯定可以碰到這些問題的,所以,這裡是我話多了~~~
OK,程式碼就是這樣了,在寫這個文章的時候,旁邊沒有Android
的裝置,所以,沒有進行測試,只測試了IOS8的裝置,所以,如果有問題,請指出,謝謝~~
也可以掃描二維碼:
總結
我的本意是把這個方法,寫成一個基於iscroll
的外掛,但當前還沒有完成,所以現在只給出一個最簡單demo
,待我閒暇時間,把該外掛進行完善一下。
注:本例中引入的iscroll.js
經過了作者本人的一些修改,所以跟官網的程式碼,有出入,如需驗證該問題,請自行下載demo。
如有問題,也請不吝指教,謝謝!