跨終端電商平臺的實現之移動端詳情頁多窗口切換（選項卡）效果實現

在移動端的商品詳情頁涉及多個內容切換的問題，這裏使用選項卡設計方式，使用選項卡的設計是各大主流電商平臺所採用主要形式，例如淘寶和京東。簡單的選項卡實現起來比較容易，只要監聽選項按鈕並控制相應內容的現實與隱藏。若是隻是單純的顯示和隱藏的話，對於用戶的體驗很差。因此改單純的顯示與隱藏爲滑動的效果，要實現滑動的效果就須要知足如下幾個條件：
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，歡迎你們的下載、提問和關注哈。