本文實例講述了使用jQueryMobile實現滑動翻頁效果的方法。分享給大家供大家參考。具體分析如下:
滑動手勢在行動裝置是很流行的,在行動裝置滑動翻頁中很常見
雖然這個功能可以在jQueryMobile中實現,但是個人與之前一篇【jQuery手機瀏覽器中拖曳動作的艱難性分析】中的觀點一致,由於這是在手機瀏覽器中瀏覽,而不是安卓的一個獨立APP,所以不要經常點擊以外的行動裝置手勢,以免跟手機瀏覽器與手機系統本身的手勢發生衝突。
那麼,使用jQueryMobile實現滑動翻頁的效果到底怎麼做呢?
一、基本目標
在手機瀏覽器中的jQueryMobile框架頁中現實滑動手勢翻頁的功能,如下圖:
並且記錄目前頁的頁數,隨使用者滑動而自動增加與減少。
二、製作過程
關於JqueryMobile的介面怎麼佈置,不再細說,詳情請翻閱之前一篇【jQueryMobile之Helloworld與頁面切換的方法】
如下的程式碼註釋,主要是敘述如何透過對JqueryMobile封裝好的滑動手勢jQuery Mobile Swipeleft與jQuery Mobile Swiperight處理,來實現上面的頁面,W3C《jQuery Mobile Touch 事件》一文中對此的敘述是有問題的,實驗代碼與給出的代碼並不一致: