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事件学习第二课：摸这里