摘要：在移動端的商品詳情頁涉及多個內(nèi)容切換的問題，這里使用選項卡設(shè)計方式，使用選項卡的設(shè)計是各大主流電商平臺所采用主要形式，例如淘寶和京東。然后構(gòu)造第二個函數(shù)，根據(jù)傳入的現(xiàn)在選項卡的和要顯示選項卡的，在條件語句中執(zhí)行相應(yīng)的滑動函數(shù)。

在移動端的商品詳情頁涉及多個內(nèi)容切換的問題，這里使用選項卡設(shè)計方式，使用選項卡的設(shè)計是各大主流電商平臺所采用主要形式，例如淘寶和京東。簡單的選項卡實現(xiàn)起來比較容易，只要監(jiān)聽選項按鈕并控制相應(yīng)內(nèi)容的現(xiàn)實與隱藏。如果只是單純的顯示和隱藏的話，對于用戶的體驗不好。所以改單純的顯示與隱藏為滑動的效果，要實現(xiàn)滑動的效果就需要滿足以下幾個條件：
1.所有選項卡都應(yīng)該包含在同一個元素之中，通過父元素位置的改變來達到滑動的效果；
2.由于各個選項卡的高度不一致，所以應(yīng)該在滑動結(jié)束后實時動態(tài)的去改變父元素的高度。選項卡實現(xiàn)效果圖：

實現(xiàn)的思路是構(gòu)造一個基礎(chǔ)函數(shù)用于實現(xiàn)父元素的移動，傳入的參數(shù)有移動的方向以及移動的距離。本設(shè)計中該選項卡有三個選項，所以移動的方向有兩個而移動距離有兩種情況，分別是滑動一屏和滑動兩個屏幕的長度，同樣這里為了兼容各個不同的設(shè)備采用的是相對單位，一個屏幕的寬度等于10rem。然后構(gòu)造第二個函數(shù)，根據(jù)傳入的現(xiàn)在選項卡的id和要顯示選項卡的id，在條件語句中執(zhí)行相應(yīng)的滑動函數(shù)。除了這兩個函數(shù)之外還需要添加相關(guān)的監(jiān)聽事件來確定起始位置與目標位置。
首先通過HTML代碼，看下頁面的結(jié)構(gòu)是怎樣的：

        //頁面的頭部，包含三個按鈕
        div.header
            span#header-info.header-focus 基本信息
            span#header-more 商品詳情
            span#header-comment 評價1734
        //頁面的中部，包含的是具體的三個板塊，每次只顯示某個板塊
        //選項卡功能就是通過頁面頭部按鈕和中部內(nèi)容互動實現(xiàn)
        div.middle-outer
            div.middle 
                //基本信息模塊
                div.info 
                    div.piclist-outer
                        div.piclist-inner
                            each singleBig in gmainImgs
                                img(src="#{singleBig}" alt="slide img")
                //商品詳情模塊
                div.more 
                    span 商品圖片
                    div.more-wrapper
                        each singDetailImg in gdetailImgs
                            img(src="#{singDetailImg}" alt="")
                //商品評論模塊
                div.comment 
                    div.comment-keyword
                        span.keywords-selected 全部
                        span 追加(569)
                        span 有圖(453)
                        span 鞋子不錯(452)
                        span 做工一般(12)
                        span 舒適度不錯(659)
        //頁面的底部
        div.footer
            div.footer-iconlist
                a(href="javascript:;").footer-iconlist-link
                    span.glyphicon.glyphicon-user
                    span.footer-iconList-txt 客服
                a(href="javascript:;").footer-iconlist-link
                    span.glyphicon.glyphicon-star-empty
                    span.footer-iconList-txt 收藏
                a(href="/mshopcart").footer-iconlist-link
                    span.glyphicon.glyphicon-shopping-cart
                    span.footer-iconList-txt 購物車
            div#footer-btns
                a(href="javascript:;").footer-btn.footer-btn-addToCart 加入購物車
                a(href="javascript:;").footer-btn.footer-btn-buyNow 立即購買
        div.masker
            span.masker-text 加入購物車成功
            span.masker-sign 
                span.glyphicon.glyphicon-ok

具體的JS代碼為：

//關(guān)鍵的兩個函數(shù)，slide和move，slide確定移動的方向和距離，move負責具體的移動
//在此函數(shù)中使用switch語句來進行判斷可以使用更加簡潔的代碼，直接調(diào)用函數(shù)move并傳入dis值，需要簡單調(diào)整下move函數(shù)的實現(xiàn)
//根據(jù)起始的位置以及最終的位置來調(diào)用函數(shù)move
function slide(nowPosId,nextPosId) {
//獲取當前點擊的頭部按鈕的id值與此前選中頭部按鈕的id值
//使用兩者相減得到差值
var dis=nextPosId - nowPosId
//使用switch語句根據(jù)不同的差值執(zhí)行不同的調(diào)用
switch(dis){
    case 1:
        //slide to left 10rem
        //如果差值為1則向左滑動一屏的距離
        move(-1 , screenWidth)
        break
    case -1:
        //slide to right 10rem
        //如果差值為-1則右滑動一屏距離
        move(1 , screenWidth)
        break
    case 2:
        //slide to left 20rem
        //如果差值為2則向左滑動兩屏距離
        move(-1 , 2 * screenWidth)
        break
    case -2:
        //slide to right 20rem
        //如果差值為-2則向右滑動兩屏距離
        move(1 , 2 * screenWidth)
        break
}
}

//執(zhí)行具體的元素移動的函數(shù)，direc表示方向，-1表示向左滑動，1表示向右滑動
function move( direc , move_lenth) {
//用于記錄移動的距離，當移動距離達到參數(shù)時停止計時器
var move_dis=0
//計時器的執(zhí)行間隔時間
var move_time=20
//獲取父元素的left值
var now_css_left=parseInt($(".middle").css("left"))
//開始執(zhí)行計時器，使用一個作用于限于函數(shù)的變量來保存計時器對象
var timer=setInterval(function () {
//計算得到一次執(zhí)行中的left值，當direc帶有正負的信息可以決定移動的方向
now_css_left += direc * setpmove
//計算累計移動距離
move_dis +=setpmove
//設(shè)置父元素的left值
$(".middle").css("left",now_css_left + "px")
//當移動完畢時，根據(jù)被點擊的按鈕來設(shè)置父元素的高度
if (Math.abs(move_dis - move_lenth) < 0.001 ) {
clearInterval(timer)
switch(focus_id){
case(1):
    $(".middle").css("left","0rem").css("height" , infoH)
    $(".middle-outer").css("height" , infoH)
    console.log($(".middle-outer").css("height"))
    break
case(2):
    $(".middle").css("left","-10rem").css("height" , moreH)
    $(".middle-outer").css("height" , moreH)
    console.log($(".middle-outer").css("height"))
    break
case(3):
    $(".middle").css("left","-20rem").css("height" , commentH)
    $(".middle-outer").css("height" , commentH)
    console.log($(".middle-outer").css("height"))
    break
default:
    break
}
//將頁面設(shè)置到最頂部，因為子元素高度不統(tǒng)一的緣故
window.scrollTo(0,0)
}        
},move_time)//end timer
}//end func move


//點擊的監(jiān)聽事件
//點擊頭部標題“基本信息”的監(jiān)聽事件
$("#header-info").click(function () {
//header_focus_item變量保存的是此時聚焦的選項卡按鈕的標題，
//若點擊此時顯示選項卡自己的按鈕，則不執(zhí)行任何操作
if (header_focus_item==$(this).attr("id")) {
    return
}
//clickbtn變量保存的點擊按鈕的序號，“基本信息”為1，“商品詳情”為2，“評價”為3
clickbtn=1
//調(diào)用slide函數(shù)，傳入的值為當前的選項卡id以及目標的id
slide(focus_id,clickbtn)
focus_id=1
//改變此按鈕的樣式，是用戶能夠清楚了解此時查看的是哪一個選項卡
$(this).addClass("header-focus")
//改變此前選中選項卡對應(yīng)按鈕的樣式，使其成為普通選項卡按鈕
$("#"+header_focus_item).removeClass("header-focus")
header_focus_item="header-info"
})

//點擊頭部“商品詳情”的監(jiān)聽事件，執(zhí)行的操作和點擊“基本信息”類同
$("#header-more").click(function () {
if (header_focus_item==$(this).attr("id")) {
    return
}
clickbtn=2
slide(focus_id,clickbtn)
focus_id=2
$(this).addClass("header-focus")
$("#"+header_focus_item).removeClass("header-focus")
header_focus_item="header-more"
})

//點擊頭部“評價”的監(jiān)聽事件，執(zhí)行的操作和點擊“基本信息”類同
$("#header-comment").click(function () {
if (header_focus_item==$(this).attr("id")) {
    return
}
clickbtn=3
slide(focus_id,clickbtn)
focus_id=3
$(this).addClass("header-focus")
$("#"+header_focus_item).removeClass("header-focus")
header_focus_item="header-comment"
})
    

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