移動端圖片隨手勢移動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)'
    }

　　這三個函數分別對應onTouchStart，onTouchMove，onTouchEnd事件。

　　當開始TouchStart時，記錄觸控時的當前pageX值，並阻止觸控時的默認事件，這樣默認的事件就不會發生，圖片只會隨着代碼移動。這時候改變一個state，是消除-webkit-transition: 0.15s all ease這個樣式，因為在安卓機上，有這個效果時會導致很卡。

　　接下來在滑動過程中，就是圖片滑動距離的計算了，每張圖片都是整屏的寬度，所以用已經滑過的距離減去開始的觸控點位置和移動的距離的差，就是圖片隨手指一起移動的距離。

　　最后結束后根據這個差值的正負來判斷圖片往那邊移動，來實現呈現的效果。

　　這里用translate3d其實用2d也是可以的，但是這樣可以強制用手機的GPU渲染，會更流暢，安卓機上一些奇葩的滾動渲染如果有奇葩的問題出現，可以加上transform: translateZ(0)，這樣會用GPU渲染，一般問題都會解決。

　　最后附上github地址https://github.com/xinghunMeng/react-image-slide。

　　這篇中主要講解了移動開發中的幾個小tip是，希望可以幫助大家解決在開發過程是的一些問題。

　　這些都是實際開發過程中遇到的問題自己的一些解決方案，如有錯誤，多謝大家斧正。