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

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

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

因?yàn)槭褂玫氖荍ade，所以為上邊的格式。最外層的div是整個(gè)滑動(dòng)區(qū)域，類名為.piclist-inner的div包裹著若干個(gè)圖片，這些圖片水平并列。類名為.piclist-signal-wrapper包裹的是當(dāng)前顯示是第幾個(gè)圖片的標(biāo)志。

下面再來看具體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
    }
    //獲取觸摸時(shí)的橫縱坐標(biāo)
    startX=e.touches[0].pageX
    startY=e.touches[0].pageY
    slidewrap.addEventListener("touchmove",handlemove,false)
    // console.log("sx is: "+ startX+"sy is : " + startY)
}    

//觸摸的移動(dòng)事件處理函數(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)
        //如果當(dāng)前是第一張幻燈或者最后一張幻燈，則讓滑動(dòng)速度降為原來的三分之一，已到達(dá)提示用戶已不可滑動(dòng)。
        if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
            distanceX=distanceX / 3
        }
        //通過改變transform屬性值來達(dá)到移動(dòng)的效果
        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")
    //如果是第一張幻燈并向左滑動(dòng)或者最后一張幻燈向右滑動(dòng)的情況下，在滑動(dòng)結(jié)束時(shí)顯示原先的幻燈不發(fā)生改變
    if ((page == 0 && distanceX < 0) || (page == (listUlLen - 1) && distanceX > 0)) {
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
        return
    }
    //如果滑動(dòng)的距離大于100px，則向右切換幻燈片
    if (distanceX>=100) {
        listUl[page].style.background="#e0e0e0"
        page++
        listUl[page].style.background="#c40000"
        //通過定時(shí)器實(shí)現(xiàn)滑動(dòng)的動(dòng)畫效果
        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)
    }
    //如果滑動(dòng)距離小于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)
    }
    //如果滑動(dòng)的距離沒有達(dá)到臨界的距離則不切換
    else{
        transX=- page * screenWidth
        slideInner.style.transform="translate3d("+transX+"px,0,0)"
    }
}

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