利用 Swipe Event 控制換頁

image
Carousel 效果是我認為在 Mobile 上面最難處理的部分,大部分的作法都是用一個長條 div 只顯示其中一部份,再用 css : Left 或是 Top 去控制顯示的部分。如果是 jQuery 早期的動畫效果 jquery.animate() 就算是 ipad2 跑起來也是超頓的,唯一的解法就是利用 –webkit-Transform 來做處理。
在 jQuery Mobile 上面預設在換頁的時候就會觸發 –webkit-Transform 來處理換頁的特效(在不支援的瀏覽器上面會直接換頁顯示),但是這邊的特效跟其他 Framework 呈現方式比較不一樣的是在觸控移動的時候 jQuery Mobile Swipe 的方式是當使用者手指移動超過一段距離之後,就觸發 Swipe 事件。其他的 framework 如果有將 touchstart ,touchmove ,touchend 分別做處理的話,就可以在手指移動的同時就做畫面移動的效果,然後在 touch end 手指離開計算距離決定要不要呈現下一頁,抑或是距離不足就停留在原本頁面。jQuery Mobile 目前看起來沒有太重視這一塊,感覺他們的主要目標還是在容易開發、廣泛支援上面。

Swipe Events

基本上 jQuery Mobile 就是讓你很容易套用,所以要取得滑動的事件只要註冊 swipe event 就可以了,jQuery Mobile 利用 javascript 的 touch event 如果長度超過一定距離就觸發 swipe event。

  • 預設在一秒之內移動水平距離超過 30px 而且垂直小於 20px ,就會觸發 swipe 事件。
  • $.event.special.swipe.horizontalDistanceThreshold = 130; 設定 horizontalDistanceThreshold 參數,將原本水平移動距離 30px 改為 130px 之後,他才會觸發 swipe 事件,這邊就是根據測試的習慣來修改,避免因為太容易換造成其實 user 並沒有想要換頁,但是事件被觸發。
  • durationThreshold Swipe 動作要在多少時間下被完成,如果超過這個時間就不觸發 Swipe 事件,預設 1000 (ms)。
  • verticalDistanceThreshold 垂直移動不能超過多少(px)才觸發 Swipe。
  • scrollSupressionThreshold 水平移動超過多少(px)就停止原本垂直滾動。

Example

一開始我先建立一個 js 物件

Site: {
PrePage: { Url: "" },
NextPage: { Url: "" }
}

全網站註冊 Swipe 事件,只註冊一次

$(document).ready(function () {
$.event.special.swipe.horizontalDistanceThreshold = 130;
$(document).bind("swipeleft", function (e) {
$.mobile.changePage(Site.NextPage.Url, { transition: 'slide' });
});
$(document).bind("swiperight", function (e) {
$.mobile.changePage(Site.PrePage.Url, { transition: 'slide', reverse: true });
});
});

在每一頁載入的時候去修改物件的值

$('div:jqmData(role="page")').live('pageinit', function () {
Pru.Site.PrePage.Url = '@(PreviousSibling.Url)';
Pru.Site.NextPage.Url = '@(NextSibling.Url)';
});

這邊我是用 mvc3 Razor 搭配 ASP.NET MVC SiteMap provider 來控制,強力推薦 ASP.NET MVC SiteMap provider 很好用喔。全網站事件我只有註冊一次,如果在每一次 pageinit (pageint 是 jQuery Mobile 事件,ajaxload 新頁面進來觸發) 重複註冊的話,就會變成一次 swipe 換了好多頁。也有考慮過利用 bind unbind 來控制,但是似乎不是很容易,目前感覺上還是用 js 物件操作會比較方便。


jQuery Mobile | jQuery Mobile

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *