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

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

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

        //頁面的頭部，包含三個按鈕
        div.header
            span#header-info.header-focus 基本信息
            span#header-more 商品詳情
            span#header-comment 評價1734
        //頁面的中部，包含的是具體的三個板塊，每次只顯示某個板塊
        //選項卡功能就是通過頁面頭部按鈕和中部內容互動實現
        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代碼為：

//關鍵的兩個函數，slide和move，slide確定移動的方向和距離，move負責具體的移動
//在此函數中使用switch語句來進行判斷可以使用更加簡潔的代碼，直接調用函數move并傳入dis值，需要簡單調整下move函數的實現
//根據起始的位置以及最終的位置來調用函數move
function slide(nowPosId,nextPosId) {
//獲取當前點擊的頭部按鈕的id值與此前選中頭部按鈕的id值
//使用兩者相減得到差值
var dis=nextPosId - nowPosId
//使用switch語句根據不同的差值執行不同的調用
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
}
}

//執行具體的元素移動的函數，direc表示方向，-1表示向左滑動，1表示向右滑動
function move( direc , move_lenth) {
//用于記錄移動的距離，當移動距離達到參數時停止計時器
var move_dis=0
//計時器的執行間隔時間
var move_time=20
//獲取父元素的left值
var now_css_left=parseInt($(".middle").css("left"))
//開始執行計時器，使用一個作用于限于函數的變量來保存計時器對象
var timer=setInterval(function () {
//計算得到一次執行中的left值，當direc帶有正負的信息可以決定移動的方向
now_css_left += direc * setpmove
//計算累計移動距離
move_dis +=setpmove
//設置父元素的left值
$(".middle").css("left",now_css_left + "px")
//當移動完畢時，根據被點擊的按鈕來設置父元素的高度
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
}
//將頁面設置到最頂部，因為子元素高度不統一的緣故
window.scrollTo(0,0)
}        
},move_time)//end timer
}//end func move


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

//點擊頭部“商品詳情”的監聽事件，執行的操作和點擊“基本信息”類同
$("#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"
})

//點擊頭部“評價”的監聽事件，執行的操作和點擊“基本信息”類同
$("#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，歡迎大家的下載、提問和關注哈。