摘要：仿造攜程官網題外話剛開始學前端的時候有一天看到攜程官網就希望有一天能模擬搭出來自己拖拖拉拉的一直沒整但是但是麻麻我終于完成了曾經親愛的同事把傳送門刪掉了不感謝他了感謝葉師兄拯救了我攜程攜程源碼仿攜程源碼目錄結構基于進行開發配合強行在攜程復制

題外話:
剛開始學前端的時候,有一天看到攜程官網.就希望有一天能模擬搭出來.
自己拖拖拉拉的一直沒整, 但是但是麻麻我終于完成了!!
(曾經親愛的同事把傳送門刪掉了不感謝他了 fk) 
感謝葉師兄拯救了我攜程攜程 源碼仿攜程源碼

基于vue+less進行開發,配合強行在攜程復制的數據搭建的網站

目錄是基于vue-cli的基礎下搭建的.

build/config配置文件

src是主要內容(assets包括公用的js文件,css樣式/components是公用組件/module是頁面)

dist是打包后的文件夾 node_modules是依賴包 其他就是默認的配置文件

小小講一下自己拿到攜程官網的時候是怎么拆開的(如果寫的不對請麻煩各位指出指導)

剛剛學前端的時候 看到攜程網就亂拳敲打.一點點html css強寫,
后面工作的原因用了vue,就推倒舊的重新寫了.

頁面結構是分為這幾塊:(如圖)

包括logo的header

導航欄

icon快捷入口

廣告swipe和搜索框

各專題區

底部快捷入口

底部

電梯

fixed的交互框

有頁面結構之后.就是基本功了.然后一點點搭頁面, (優化把公用組件抽出來.)

哎,沒想到好的辦法.就搭頁面的時候,順便在攜程網上面一點點的copy下來.
(我看隔壁的仿頁面貼都是通過接口的.小弟還是菜了點)

然后通過每個需要數據的頁面去引入這個mock.js...

普通的頁面樣式就不說啦.大家慢慢搭就好.
share一些less的mixin方法.

// display vertical集合
#display_type{
    .dsp-middle{
        display: inline-block;
        vertical-align: middle;
    }
    .dsp-top{
        display: inline-block;
        vertical-align: top;
    }
}

// 三角形(向下)
.arrow_down(@size, @color: black){
    //@size大小 @color顏色
    margin-left: 5px;
    &:after{
        content: "";
        display: inline-block;
        border-top: @size solid @color;
        border-left: @size solid transparent;
        border-right: @size solid transparent;
        border-bottom: @size solid transparent;
    }
}

用的比較多的2個mixin就是上面這2個.一個是display的做布局使用, 一個是人工三角形orz.
如果想要用mixin的時候,需要在css中用@import的方法引入才能用.(用js的方式,破了好久破不了放棄)

引入之后直接在頁面里面使用即可

#display_type > .dsp-middle 或另外一個;

.arrow_down(3px, #fff);

因為我的樣式是通過less寫的.
那就看著攜程官網.一點點測試.一點點完善咯.沒啥好辦法.
部分代碼如下.

@media screen and (max-width: 1200px){
            margin-right: 20px;
            
            &:last-child{
                display: none;
            }
        }   

這個電梯是存在于專題區里面的,所以我給每個專題的div添加了一個不用的類名,用來獲取當前div的滾動高度.
然后在鉤子函數mounted()里面,去獲取各個專題的高度

    const s = document.getElementsByClassName("scroll-hook");
        
    for(let dom of s){
        let scoll_h = dom.offsetTop + dom.offsetParent.offsetTop;
        this.scroll_data.push(scoll_h);
    }

電梯的精髓就是在:

根據當前的滾動高度,然后動態改變active的標識;

點擊對應的標識,頁面會滾到對應的區域;

頁面滾動的時候,在某個固定的位置待著

那么就對應的寫bie.

1.電梯的html渲染(ps. lift.index是每一個電梯的類名, lift_flag是區域的標識),然后在mounted()里給window注冊一個scroll的監聽事件,然后去獲取當前的滾動高度,然后進行判斷

    

        {{lift.name}}
    
  

2.點擊滾動,寫了一個原生的笨方法,(document.dEl那有一個兼容問題)

//頁面滾動方法
function page_scroll_to(cur, tar){
    /*
        params:
        cur 當前高度
        tar 目標高度
    */
    var during = 10; //持續時間(ms)
    var times = 20;  //持續次數
    var i = 1;       //持續標識
    var s_flag;

    if(cur < tar){
        var s = (tar - cur) / times; //滾動距離
        s_flag = setInterval(() => {
            //解決兼容性問題(原本使用documentElement即可)
            document.documentElement.scrollTop = cur + s * i;
            document.body.scrollTop = cur + s * i;
            i++;

            if(i>times){
                clearInterval(s_flag);
            }
        }, during)
    }
    else{
        var s = (cur - tar) / times;
        s_flag = setInterval(() => {
            //解決兼容性問題
            document.documentElement.scrollTop = cur - s * i;
            document.body.scrollTop = cur - s * i;
            i++;

            if(i>times){
                clearInterval(s_flag);
            }
        }, during)
    }
}

3.樣式我是直接copy攜程的. 滑動高度呢就根據滾動高度去計算, 然后用js給電梯的div寫一個內聯樣式,動態的去改變

因為給window注冊了一個scroll事件,當你一滾動,會瘋狂觸發scroll,可能在線上的會導致瀏覽器有壓力(猜的)
所以自己寫了一個throttle方法去優化這一塊,
然后在vue的原型對象中注冊了一下,可以在后續直接this.throttle只用

function throttle(fn, delay, context) {
    /*
        throttle函數(每delay時間,觸發一次fn函數)

        param:
        fn           執行函數
        delay        持續時間(ms)
        context      作用域
    */

    var last;
    //定時器
    var timer;

    return function(){
        //獲取當前的毫秒數
        var now = +new Date();

        //判斷時間
        if(last && now < last + delay){
            clearTimeout(timer);

            timer = setTimeout(function() {
                last = now;
                fn.apply(context);
            }, delay)
        }
        else{
            last = now;
            fn.apply(context);
        }
    }
}
Vue.prototype.throttle = throttle;

頁面大了一進入就觸發全部的請求,肯定不那么棒,所以此處引入了lazyload.
攜程的lazyload除了圖片.還有每個專題區(忽略愛心 - -).

ps.最開始引用了vue-lazyload這個模塊,然后里面有一個lazyComponent配置項,可以用來設置一整塊的,但是這個有一個不足的地方,就是當你頁面在比較下面的時候去刷新, lazyComponent只會update當前可視區域的部分,可視區域上面的區域就不管你........
pss.所以我自己通過上面的電梯,自己寫了一個,然后將flag標識通過組件之間傳入,然后組件內部通過watch去監控.然后動態從初始化狀態更新為內容區.

其實就是一個普通的頁面搭建,大家如果有空其實一點點就能搭出來的,
不知道強行分享的東西有沒有更好的方法呢,如果有麻煩各位指導一下小弟.
以上完畢,感謝大家感謝大家.(如果侵權了,馬上下架,僅供交流學習)

最后最后,攜程在手,說走就走.