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

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

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

        //頁面的頭部，包含三個(gè)按鈕
        div.header
            span#header-info.header-focus 基本信息
            span#header-more 商品詳情
            span#header-comment 評價(jià)1734
        //頁面的中部，包含的是具體的三個(gè)板塊，每次只顯示某個(gè)板塊
        //選項(xiàng)卡功能就是通過頁面頭部按鈕和中部內(nèi)容互動(dòng)實(shí)現(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 鞋子不錯(cuò)(452)
                        span 做工一般(12)
                        span 舒適度不錯(cuò)(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)鍵的兩個(gè)函數(shù)，slide和move，slide確定移動(dòng)的方向和距離，move負(fù)責(zé)具體的移動(dòng)
//在此函數(shù)中使用switch語句來進(jìn)行判斷可以使用更加簡潔的代碼，直接調(diào)用函數(shù)move并傳入dis值，需要簡單調(diào)整下move函數(shù)的實(shí)現(xiàn)
//根據(jù)起始的位置以及最終的位置來調(diào)用函數(shù)move
function slide(nowPosId,nextPosId) {
//獲取當(dāng)前點(diǎn)擊的頭部按鈕的id值與此前選中頭部按鈕的id值
//使用兩者相減得到差值
var dis=nextPosId - nowPosId
//使用switch語句根據(jù)不同的差值執(zhí)行不同的調(diào)用
switch(dis){
    case 1:
        //slide to left 10rem
        //如果差值為1則向左滑動(dòng)一屏的距離
        move(-1 , screenWidth)
        break
    case -1:
        //slide to right 10rem
        //如果差值為-1則右滑動(dòng)一屏距離
        move(1 , screenWidth)
        break
    case 2:
        //slide to left 20rem
        //如果差值為2則向左滑動(dòng)兩屏距離
        move(-1 , 2 * screenWidth)
        break
    case -2:
        //slide to right 20rem
        //如果差值為-2則向右滑動(dòng)兩屏距離
        move(1 , 2 * screenWidth)
        break
}
}

//執(zhí)行具體的元素移動(dòng)的函數(shù)，direc表示方向，-1表示向左滑動(dòng)，1表示向右滑動(dòng)
function move( direc , move_lenth) {
//用于記錄移動(dòng)的距離，當(dāng)移動(dòng)距離達(dá)到參數(shù)時(shí)停止計(jì)時(shí)器
var move_dis=0
//計(jì)時(shí)器的執(zhí)行間隔時(shí)間
var move_time=20
//獲取父元素的left值
var now_css_left=parseInt($(".middle").css("left"))
//開始執(zhí)行計(jì)時(shí)器，使用一個(gè)作用于限于函數(shù)的變量來保存計(jì)時(shí)器對象
var timer=setInterval(function () {
//計(jì)算得到一次執(zhí)行中的left值，當(dāng)direc帶有正負(fù)的信息可以決定移動(dòng)的方向
now_css_left += direc * setpmove
//計(jì)算累計(jì)移動(dòng)距離
move_dis +=setpmove
//設(shè)置父元素的left值
$(".middle").css("left",now_css_left + "px")
//當(dāng)移動(dòng)完畢時(shí)，根據(jù)被點(diǎn)擊的按鈕來設(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è)置到最頂部，因?yàn)樽釉馗叨炔唤y(tǒng)一的緣故
window.scrollTo(0,0)
}        
},move_time)//end timer
}//end func move


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

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

//點(diǎn)擊頭部“評價(jià)”的監(jiān)聽事件，執(zhí)行的操作和點(diǎn)擊“基本信息”類同
$("#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"
})
    

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