Javascript Touch事件學習筆記3 實現一個APP框架一 左右滑動切換面板
Demo入口：摸這里
前面大致研究了下touch事件的基本功能和用法，下面就學以致用，實現一些具體的應用試試。
接下來我打算實現一個類似網易新聞APP的一個Web框架,如下圖。
主要實現一下這三個功能：
1：左右滑動實現左右切屏
2：向下滑動加載最新新聞，向上滑動加載隨后新聞
3,：點擊進入新聞內頁
下面來實習功能一：
涉及到的相關技術點除了touch事件之外，還有就是css3的transition屬性。
在開發過程中主要遇到了兩個問題
1，移動終端上如果不想讓瀏覽器可以放大縮小，在meta的viewport屬性里面新增user-scalable=no即可。
2，如果不想讓瀏覽器很想可以拖動，用body{overflow:hidden;}是不行的。要在body上禁用touchmove事件,并且在溢出的div上加一個最小高度(為什么要加一個最小高度我也不解)，例如min-height:100%;。
源碼見demo。
這種方法在安卓瀏覽器上是有效的，但是在UC瀏覽器上不知道為什么沒辦法禁用拖動，等以后有時間再研究研究。
原理：
當手指落下時（touchstart），在一個全局變量記錄下當前的位置（通過方法CheckLeftStart），當手指拿起時（touchend或者touchcancel）用當前的位置和手指落下的時候的位置進行比較，根據所得來判斷手指移動的方向，從來做出相應的動作。
Touch事件學習第一課：摸這里
Touch事件學習第二課：摸這里