利用touch事件模仿iPhone右滑返回上一页

适用场景：比较简单的交互，例如从一个列表页面进入详情页面，在详情页面右滑返回到列表页面。

主要思路就是将详情页面通过一个iframe，append到当前窗口的top层，在右滑时将iframe的背景设置为透明，里面的元素进行右移，当右移到一定距离后隐藏该iframe，效果如下：

几个需要注意的地方：

1、如果是苹果手机，这个功能就会和手机本身的右滑返回冲突，所以需要通过navigator.userAgent来区分客户终端， 如果是苹果就正常通过href跳转到详情页面。

2、首次点击查看详情需要新建详情的iframe， 之后再点击其他的内容查看详情，只需要改变iframe的src，不要再新增iframe。

3、当iframe加载完毕时（即详情页面的内容加载完毕），隐藏包裹列表的元素， 因为实际上列表和点击列表某条记录进入的详情iframe都是在一个页面上，左右滑动的过程就是实现这两个部分的交替显示和隐藏。

4、在“touchstart”事件中，获取开始的x,y坐标，在“touchmove”事件中获取滑动后的X,Y坐标，通过Math.abs(X - x) - Math.abs(Y - y) > 0判断是左右滑动还是上下滑动， 通过X-x > 0可判断是左滑还是右滑，在“touchend” 事件中，通过滑动的距离（是否超过页面宽度的一半）判断是隐藏iframe(即造成返回上一页的效果)，还是让iframe的left = "0px"（即归位，依然是详情页面）， 效果如下：

5、由于这个思路是通过类似于弹出窗口的形式， 通过在主页面添加iframe展现子页面内容来实现子页面可右滑返回主页面的效果，所以不适用于页面较多交互比较复杂的场景。

6、本来是想滑动过程中改变iframe的left值，可是滑动的时候整个iframe会抖动（不知什么原因）, 而改变iframe页面中的根div的left值效果就很流畅，这样一来只要iframe的背景透明， 就可以实现这种“美女揭开面纱”的效果了。

7、iframe背景设置透明的方法：给iframe中页面的body加上属性：background: transparent即可。

转载于:https://my.oschina.net/zerzer/blog/1438985