触控切换tab效果的页面实现方法

　　题目有些拗口，大概意思就是“能够用手指拖动来改变tab标签的移动端页面的实现方法”，还是有点拗口，好吧，whatever，大家看下去就明白了。

　　前些天做了个基于html的web应用，里面有个普通的那种切换标签并显示相应内容的tab模块，老大希望能在页面里面实现触控切换的效果，于是，去找。

　　本来JqueryMobile里面是有现成的方法的（swipe,swipeleft,swiperight），大喜，用之。效果很快出来， 本以为可以喝茶看微博去了，但测试的时候却发现效果在安卓自带的浏览器上面很差（本人MI3W），而chrome上面却很流畅。百思不得其解，而确实有网站是能够流畅的实现这种效果的。思考可能是JQM在实现上的问题 ，于是只能找原始的办法。

　　度娘问之，得到答案：touch事件。

　　touch事件实现一个完整的效果和把大象装冰箱是一样的，总共分三步 ：1.touchstart ; 2.touchmove ; 3. touchend ;看字面意思就能理解，分别是触摸开始，触摸过程中，和触摸结束。另有参数：touches：位于屏幕上的触摸点（也就是手指）的集合；targetTouches：位于元素上的触摸点的集合；changedTouches:涉及当前事件的触摸点的集合等等,我们要用到的是targetTouches。

　　于是先把html结构和css定义完成，并不复杂：上部是一行三个tab标签，下面是内容区，内容里面是一行三个内容容器，每个容器的大小等于内容区的大小，每次切换只显示一个容器。这里我们内容部分的切换不采取切换display为none或block的方式，因为要用手指去拖动，所以三个内容容器都要横向排列位于一个父容器内部，这个父容器设置“position为relative”并位于一个窗口容器内部，窗口容器设置“overflow：hidden”即可，加好对应的样式即可。

　　下面开始js部分的思路：我们要实现拖动的元素是父容器，拖动过程中父容器跟随手指，拖动结束时根据判断得到的滑动方向将父容器移动一个子容器的宽度，并且同时切换上面tab标签的样式。当父容器移动到左边或者右边的时候取消父容器的移动。

　　所以，我的大体设计思路如下：

1.touchstart部分

在开始部分获取手指的起始位置和父元素的左值（offsetLeft）。

2.touchmove部分

将滑动时的手指位置与touchstart获取到的起始位置作减法，从而得出滑动方向，并将父容器的left值增减设置为减法的差值，以实现父容器跟随手指移动。

 3.touchend部分

根据touchmove中得到的滑动方向（布尔值，非左即右），为父容器的left赋值，从而实现显露出来的子容器的切换。同时为tab标签的样式做改变，以表达切换效果的实现。

因为demo做得有些凌乱，具体代码就暂不放出了，相信有了思路就都好解决了，如有需要或问题，可以留言。

截图：