摘要：在基本信息通過幻燈效果顯示商品的大圖，通過手指的滑動來控制幻燈的顯示。在本設(shè)計中借鑒了各大主流電商平臺的主流做法，即在無效滑動情況下降低幻燈的滑動速度讓用戶知道已近無法移動了。

移動端人機交互方式同PC端發(fā)生了本質(zhì)的變化，在PC端使用鼠標和鍵盤進行交互，而移動端使用的是手指的觸摸和滑動。PC端開發(fā)時主要監(jiān)聽鼠標事件，例如mouseEnter（鼠標進入事件）、mouseMove（鼠標移動事件）、mouseLeave（鼠標離開事件）。而在移動端監(jiān)聽事件為觸摸的開始事件，觸摸移動事件，以及觸摸的結(jié)束事件。在本設(shè)計中商品詳情頁通過選項卡來達到切換顯示基本信息、商品細節(jié)信息以及評論信息。在基本信息通過幻燈效果顯示商品的大圖，通過手指的滑動來控制幻燈的顯示。移動端手勢操作效果圖：

實現(xiàn)的方法是監(jiān)聽手勢的開始事件，記錄手指在屏幕上的起始位置。監(jiān)聽手勢的移動事件，獲取移動中手指的坐標，并將移動的手指坐標減去起始位置的坐標得到手指移動的距離。然后實時地去改變幻燈片的transform的值來達到幻燈移動的效果。最后需要監(jiān)聽手勢的結(jié)束事件，在該事件的處理函數(shù)中得到手指最后的位置，同樣使用最后的位置減去手指的起始位置得到最終手指移動的距離，判斷手指最終的移動距離是否大于滑動的臨界值，本設(shè)計在此處設(shè)置臨界值為100px，如果大于臨界值則切換幻燈片，否則不進行切換。
在切換中特殊情況是幻燈處于第一張并向左滑動，以及最后一張并向右滑動，這兩種操作都是無效的因為第一張幻燈左側(cè)以及第二張幻燈右側(cè)都是沒有圖片的。如何友好的告訴用戶已近滑動到了第一張或者最后一張是提升用戶體驗的關(guān)鍵。在本設(shè)計中借鑒了各大主流電商平臺的主流做法，即在無效滑動情況下降低幻燈的滑動速度讓用戶知道已近無法移動了。這種做法既保持了操作上的一致性，因為沒有直接不響應(yīng)用戶的操作，又清楚明白的告訴了用戶已經(jīng)滑動到了盡頭。
在PC端的開發(fā)過程中，使用絕對定位改變top與left的值來實現(xiàn)元素的移動。在第一次嘗試使用絕對定位來實現(xiàn)，當手指滑動時改變元素的top值與left值，此時出現(xiàn)了元素左右抖動的情況。因為移動端都很好的支持了CSS3與HTML5，所以在移動端開發(fā)過程中可以放心地使用CSS3中transform樣式，其樣式值有translate3d（三個方向的移動）、transformX（橫向的移動）、transformY（縱向的移動）、scale（2d縮放轉(zhuǎn)換）、rotate（定義2d的旋轉(zhuǎn)）等等。這里使用translate3d來改變元素位置。transform與絕對定位在表現(xiàn)上的不同是由于瀏覽器在樣式改變時會觸發(fā)重構(gòu)與重繪，在改變絕對定位的left與top值是首先觸發(fā)了重構(gòu)接著觸發(fā)重繪，而通過transform只觸發(fā)了瀏覽器的重繪。從而使用transform提高了瀏覽器的處理效率，擁有更好的性能。在實際表現(xiàn)中transform也能夠非常完美解決問題。

HTML結(jié)構(gòu)為：

                    div.piclist-outer
                            div.piclist-inner
                                each singleBig in gmainImgs
                                    img(src="#{singleBig}" alt="slide img")
                            div.piclist-signal-wrapper
                                ul.piclist-signal
                                    each singleBig in gmainImgs
                                        li

因為使用的是Jade，所以為上邊的格式。最外層的div是整個滑動區(qū)域，類名為.piclist-inner的div包裹著若干個圖片，這些圖片水平并列。類名為.piclist-signal-wrapper包裹的是當前顯示是第幾個圖片的標志。

下面再來看具體js代碼：

// @begin finger js
var slidewrap=document.getElementsByClassName("piclist-outer")[0]
var slideInner= document . getElementsByClassName("piclist-inner")[0]
var page=0
var distanceX=0
var transX=0
var listUl=document.getElementsByClassName("piclist-signal")[0].getElementsByTagName("li")
var listUlLen=listUl.length
//觸摸的開始事件的處理函數(shù)
function handlestart (e) {
    if(e.touches.length!==1){
        return
    }
    //獲取觸摸時的橫縱坐標
    startX=e.touches[0].pageX
    startY=e.touches[0].pageY
    slidewrap.addEventListener("touchmove",handlemove,false)
    // console.log("sx is: "+ startX+"sy is : " + startY)
}    

//觸摸的移動事件處理函數(shù)
function handlemove (e) { 
    transX = - page * screenWidth
    // console.log("page:"+(-page * screenWidth))
    slideInner.style.transform="translate3d("+transX+"px,0,0)"
    var touches=e.touches
    if (touches&&touches.length) {
        distanceX=startX-touches[0].pageX
        // console.log("distanceX :"+distanceX)
        // console.log("handlemove"+transX)
        //如果當前是第一張幻燈或者最后一張幻燈，則讓滑動速度降為原來的三分之一，已到達提示用戶已不可滑動。
        if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
            distanceX=distanceX / 3
        }
        //通過改變transform屬性值來達到移動的效果
        var transX=-distanceX-page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
    }
    e.preventDefault()
}    

//觸摸的結(jié)束事件處理函數(shù)
function handleend(argument) {
    transX=- page * screenWidth - distanceX
    var move_time =1
    var move_dis=8
    // console.log("move end")
    //如果是第一張幻燈并向左滑動或者最后一張幻燈向右滑動的情況下，在滑動結(jié)束時顯示原先的幻燈不發(fā)生改變
    if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
        return
    }
    //如果滑動的距離大于100px，則向右切換幻燈片
    if (distanceX>=100) {
        listUl[page].style.background="#e0e0e0"
        page++
        listUl[page].style.background="#c40000"
        //通過定時器實現(xiàn)滑動的動畫效果
        var timer=setInterval(function () {
            slideInner.style.transform="translate3d("+transX+"px,0,0)"
            transX-=move_dis
            // console.log("transX:"+transX)
            // console.log("page:"+-page*(screenWidth + 1))
            if (transX <= -page * (screenWidth + 1)) {
                clearInterval(timer)
            }
        },move_time)
    }
    //如果滑動距離小于100px，則向左切換幻燈片
    else if (distanceX<=-100) {
        listUl[page].style.background="#e0e0e0"
        page--
        listUl[page].style.background="#c40000"
        var timer=setInterval(function () {
            slideInner.style.transform="translate3d("+transX+"px,0,0)"
            transX+=move_dis
            // console.log("transX:"+transX)
            // console.log("page:"+-page*(screenWidth + 1))
            if (transX >= -page * (screenWidth + 1)) {
                clearInterval(timer)
            }
        },move_time)
    }
    //如果滑動的距離沒有達到臨界的距離則不切換
    else{
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
    }
}

查看完整項目可以去我的GitHub，歡迎大家的下載、提問和關(guān)注哈。