Mobile Scroll View - iOA
Mobile Scroll View - iOA

Mobile Scroll View 實作心得

吳政賢· ·

為了讓手機水平瀏覽圖片的操作更像 App 的介面,所以利用 JavaScript、jQueryjQuery-UIjQuery.UI.Touch-Punch 等套件,實作 Scroll View 的水平滑動效果。



功能主要是依賴 jQuery 與 jquery-UI 實作,再利用 jQuery-UI 的 Draggable 實作拖曳的效果,則 Draggable 需要設定 axis: 'x' 來固定水平拖曳移動。不過此時會發現手機的滑動時 Draggable 會失效,所以還需仰賴 jQuery.UI.Touch-Punch 修正!然後我再利用這些巨人大大的 library 作出這個 jQuery extend function!

特別注意的部分是:

  • 手機上實測好像還會頓頓的.. 還在調整中..
  • Demo 頁面所有元素都是採用 box-sizing: border-box; 操作,所以要改的話,要稍微注意版型 css 部分。
  • 因為是使用 scss 撰寫,故此專案會有 scss、css 的資料夾。
  • 目前最多容納 100 個水平元素!
  • Demo 頁面中 imgLiquid 只是讓我調整圖片的顯示,非主要功能!

以上就是這次 Mobile Scroll View 的開發心得如有任何問題歡迎來信討論。