移動端H5混合開發，Touch觸控，拖拽，長按, 滑屏 實現方案

   

 概述

　　近期因爲產品快速原型開發的須要，不想用原聲的方式開發App兩端一塊兒搞時間來不及，目前產品處於大量上feature的階段，採用混合開發是最合適的選擇，因此花了3天的時間研究怎麼去實現移動端，拖拽，長按，讀取手機相冊並作本地預覽。 

　　想要實現的效果就是：

1. 上傳一張圖片做爲背景圖片，可以在圖片位置上打點至關於打tag　
2. 在手機屏幕上長按在事件發生的中心位置建立一個tag
3. 這個tag可以響應touch事件實現上下左右位置的移動

      核心問題點：

1. 手機端的觸控實現方案實現，view移動時要動態改變元素的top和left並有回調函數方便接入業務邏輯
2. 背景圖上tag點位置的存儲，動態獲取element style 中 top 和 left 值經過記錄這兩個值實現定位及存

　　

 

 H5拖拽實現方案：draggable  與 touchpunch

　　 因爲以前簡單瞭解過一些h5移動端開發和響應式前端的東西, 不算太陌生，我直接搜索了 jquery h5 dragable 結果是找到了jquery的draggable，https://jqueryui.com/draggable  可是這個庫的話只支持鼠標事件在pc端ok可是移動端無法用，因此繼續搜索在 github 一個問題 draggable don't support mobile 得知 touchpunch  http://touchpunch.furf.com/ 這個庫實現了鼠標事件到touch事件的適配，能夠很好的

在移動端實現拖拽效果

 　　touchpunch 的文檔不是不少，只有簡單的使用和介紹因爲是適配的draggable因此事件和回調參數都是和draggable同樣的詳細的api文檔在這裏：

 

🌰官網有demo你們能夠細細的體會：

 

🌰：我本身的demo在這裏：https://codepen.io/buoge/pen/EpyGMX

 

 

h5 Touch事件

　　h5原生是支持touch事件的：

1.touchstart: //觸摸屏幕時觸發；即便已經有一個手指放在了屏幕上也會觸發。

2.touchmove: //在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。

3.touchend: //從屏幕上移開時觸發。

4.touchcancel: //系統取消touch事件的時候觸發

這裏我就不展開了，若是上述拖拽不能達到你想要的效果，能夠不適用第三方庫，本身去實現touch事件的處理

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events

   

長按實現方案

　  Touchpuch 不支持長按事件，屏幕觸控方案備選的有2個

• Hammer.js　　 https://hammerjs.github.io
• AlloyTouch       https://github.com/AlloyTeam/AlloyTouch

    補充知識點：iOS 點擊事件有300毫秒的延遲

　　https://thx.github.io/mobile/300ms-click-delay

　　https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari

     

    我這邊最終方案是使用的 Hammer.js ,一來是首先研究的hammer發現api簡單易用，文檔健全，兼容性也不錯，

     https://hammerjs.github.io/browser-support

     🌰：本次的demo 在這裏：https://codepen.io/buoge/pen/NBrEYY

 

     

    能夠拖動頁面上的元素，在屏幕任意位置長按能夠出發事件添加新元素

 

屏幕滾動滑屏

這塊緣起是以前在移動端有一個首頁滑屏展現的需求，個人最終選用方案是swiper，對比過這幾個以後發現就這個交互效果比較符合需求的預期,

在滾動的內容區域以內能夠很方面的添加本身的子view

🌰最終的實現效果是這個樣子： http://itsme.net.cn/ 

這個網頁在github網速關係加載可能有些慢，加載出來以後能夠看到滑屏的效果

 

代碼在這裏，有興趣能夠參考下：

https://github.com/itsmestu/itsmestu.github.io/blob/master/index.html

 

關於這塊輪子有不少下面我列舉幾個：

• swiper

       http://3.swiper.com.cn/

http://idangero.us/swiper/demos/

• zepto.fullpage　　　

　　https://github.com/yanhaijing/zepto.fullpage

• PageSlider 效果也很不錯

　　https://github.com/weixin/PageSlider

• iSlider

　　http://be-fe.github.io/iSlider/

• onepage-scroll

　　https://github.com/peachananr/onepage-scroll

• fullpage.js

　　https://github.com/powy1993/fullpage
　　http://www.dowebok.com/143.html
　　https://github.com/AlloyTeam/AlloyTouch/tree/master/full_page

• iscrolljs

　　http://iscrolljs.com

•  PagePiling

　　https://f2ex.github.io/Frontend-Library/packages/pagePiling.js/#page1

　　http://www.yyyweb.com/demo/inner-show/page-piling.html

• SmartPhoto,iOS相似的交互的圖片查看器

　　   https://appleple.github.io/SmartPhoto/ 

若是以上輪子沒有滿意的你能夠本身實現一個，實現思路：

 

• 京東凹凸技術實驗室，swiper 技術設計思路及代碼

　　https://aotu.io/notes/2017/07/17/design-a-swiper/

• baidu 滑屏技術實現及原理講解

　　http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library

• 基於淘寶適配方案flexible + 翻屏h5 適配方案adaptive

　　https://github.com/chesscai/flexible-adaptive

 

以上這些就是這兩天和前端時間關於移動端和混合app開發的一些總結，其實還有好些細節問題須要去探索，祝你們玩的開心😊！