这个效果是公司产品中一个用到的效果，用于展示项目的信息，废话少说，先上效果图，代码在最后:)，这个组件是在上篇博客中用webpack搭建的环境中完成的http://www.cnblogs.com/wunan/p/5776117.html#3490750
（完全暴露了自己的喜好--）
组件中其实最重要的就是手势的几个事件的用法，在react中手势的事件被应用为onTouchStart，onTouchMove，onTouchEnd，通过对这几个事件的监听，完成图片随手势的移动。
先看一下dom结构
这个ul是一开始展示的图片列表
这个div是图片滑动的容器
这里这么做而没有把弹层的容器放在跟展示的ul里面，是因为在开发过程中移动端这种绝对定位的弹层，在滑动的时候会穿透，下面的页面也会跟着手势一起滚动，尤其在微信中的问题尤其明显，最然这个组件没有上下滚动，但是也遵循这个规则，放在根节点的直接子元素上，这样绝对定位不会出现问题。
这里主要讲下滑动时候的原理
网友评论 |
