移动端图片随手势移动react组件（附移动开发小tips）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

这个效果是公司产品中一个用到的效果，用于展示项目的信息，废话少说，先上效果图，代码在最后:)，这个组件是在上篇博客中用webpack搭建的环境中完成的http://www.cnblogs.com/wunan/p/5776117.html#3490750

（完全暴露了自己的喜好--）

组件中其实最重要的就是手势的几个事件的用法，在react中手势的事件被应用为onTouchStart，onTouchMove，onTouchEnd，通过对这几个事件的监听，完成图片随手势的移动。

先看一下dom结构

这个ul是一开始展示的图片列表

这个div是图片滑动的容器

这里这么做而没有把弹层的容器放在跟展示的ul里面，是因为在开发过程中移动端这种绝对定位的弹层，在滑动的时候会穿透，下面的页面也会跟着手势一起滚动，尤其在微信中的问题尤其明显，最然这个组件没有上下滚动，但是也遵循这个规则，放在根节点的直接子元素上，这样绝对定位不会出现问题。

这里主要讲下滑动时候的原理

startMoveImg(e) {
this.setState({
hasMoveStyle: false
})
this.touchRange = e.touches[0].pageX
e.preventDefault()
} movingImg(length, e) {
let moveDirection = this.touchRange - e.touches[0].pageX // 当滑动到边界时，再滑动会没有效果
if ((this.count === 0 && moveDirection < 0) || (this.count === length - 1 && moveDirection > 0)) {
return
} let conunts = this.count * -this.screenWidth this.refs.carouselImg.style.webkitTransform = 'translate3d(' + (conunts - (this.touchRange - e.changedTouches[0].pageX)) + 'px, 0, 0)'
} endMoveImg(length, itemImages, e) { this.setState({
hasMoveStyle: true
}) if (this.touchRange - e.changedTouches[0].pageX > 100) {
this.count++
if (this.count === length) {
this.count = length - 1
return
}
this.setState({
imgIndex: this.state.imgIndex + 1
})
} else if (this.touchRange - e.changedTouches[0].pageX < -100) {
this.count--
if (this.count < 0) {
this.count = 0
return
}
this.setState({
imgIndex: this.state.imgIndex - 1
})
} this.refs.carouselImg.style.webkitTransform = 'translate3d(' + this.count * (-this.screenWidth) + 'px, 0, 0)'
}