移動端圖片隨手勢移動react組件(附移動開發小tips)

  這個效果是公司產品中一個用到的效果,用於展現項目的信息,廢話少說,先上效果圖,代碼在最後:),這個組件是在上篇博客中用webpack搭建的環境中完成的http://www.cnblogs.com/wunan/p/5776117.html#3490750javascript

  

  (徹底暴露了本身的喜愛--)html

  組件中其實最重要的就是手勢的幾個事件的用法,在react中手勢的事件被應用爲onTouchStart,onTouchMove,onTouchEnd,經過對這幾個事件的監聽,完成圖片隨手勢的移動。java

  先看一下dom結構react

  這個ul是一開始展現的圖片列表webpack

   

  這個div是圖片滑動的容器git

 

  這裏這麼作而沒有把彈層的容器放在跟展現的ul裏面,是由於在開發過程當中移動端這種絕對定位的彈層,在滑動的時候會穿透,下面的頁面也會跟着手勢一塊兒滾動,尤爲在微信中的問題尤爲明顯,最然這個組件沒有上下滾動,可是也遵循這個規則,放在根節點的直接子元素上,這樣絕對定位不會出現問題。github

   這裏主要講下滑動時候的原理web

    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這個樣式,由於在安卓機上,有這個效果時會致使很卡。dom

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

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

  這裏用translate3d其實用2d也是能夠的,可是這樣能夠強制用手機的GPU渲染,會更流暢,安卓機上一些奇葩的滾動渲染若是有奇葩的問題出現,能夠加上transform: translateZ(0),這樣會用GPU渲染,通常問題都會解決。

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

  這篇中主要講解了移動開發中的幾個小tip是,但願能夠幫助你們解決在開發過程是的一些問題。

  這些都是實際開發過程當中遇到的問題本身的一些解決方案,若有錯誤,多謝你們斧正。

相關文章
相關標籤/搜索