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

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

基于vue+less進(jìn)行開發(fā),配合強(qiáng)行在攜程復(fù)制的數(shù)據(jù)搭建的網(wǎng)站

目錄是基于vue-cli的基礎(chǔ)下搭建的.

build/config配置文件

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

dist是打包后的文件夾 node_modules是依賴包 其他就是默認(rèn)的配置文件

小小講一下自己拿到攜程官網(wǎng)的時(shí)候是怎么拆開的(如果寫的不對(duì)請(qǐng)麻煩各位指出指導(dǎo))

剛剛學(xué)前端的時(shí)候 看到攜程網(wǎng)就亂拳敲打.一點(diǎn)點(diǎn)html css強(qiáng)寫,
后面工作的原因用了vue,就推倒舊的重新寫了.

頁面結(jié)構(gòu)是分為這幾塊:(如圖)

包括logo的header

導(dǎo)航欄

icon快捷入口

廣告swipe和搜索框

各專題區(qū)

底部快捷入口

底部

電梯

fixed的交互框

有頁面結(jié)構(gòu)之后.就是基本功了.然后一點(diǎn)點(diǎn)搭頁面, (優(yōu)化把公用組件抽出來.)

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

然后通過每個(gè)需要數(shù)據(jù)的頁面去引入這個(gè)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個(gè)mixin就是上面這2個(gè).一個(gè)是display的做布局使用, 一個(gè)是人工三角形orz.
如果想要用mixin的時(shí)候,需要在css中用@import的方法引入才能用.(用js的方式,破了好久破不了放棄)

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

#display_type > .dsp-middle 或另外一個(gè);

.arrow_down(3px, #fff);

因?yàn)槲业臉邮绞峭ㄟ^less寫的.
那就看著攜程官網(wǎng).一點(diǎn)點(diǎn)測(cè)試.一點(diǎn)點(diǎn)完善咯.沒啥好辦法.
部分代碼如下.

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

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

    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);
    }

電梯的精髓就是在:

根據(jù)當(dāng)前的滾動(dòng)高度,然后動(dòng)態(tài)改變active的標(biāo)識(shí);

點(diǎn)擊對(duì)應(yīng)的標(biāo)識(shí),頁面會(huì)滾到對(duì)應(yīng)的區(qū)域;

頁面滾動(dòng)的時(shí)候,在某個(gè)固定的位置待著

那么就對(duì)應(yīng)的寫bie.

1.電梯的html渲染(ps. lift.index是每一個(gè)電梯的類名, lift_flag是區(qū)域的標(biāo)識(shí)),然后在mounted()里給window注冊(cè)一個(gè)scroll的監(jiān)聽事件,然后去獲取當(dāng)前的滾動(dòng)高度,然后進(jìn)行判斷

    

        {{lift.name}}
    
  

2.點(diǎn)擊滾動(dòng),寫了一個(gè)原生的笨方法,(document.dEl那有一個(gè)兼容問題)

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

    if(cur < tar){
        var s = (tar - cur) / times; //滾動(dòng)距離
        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攜程的. 滑動(dòng)高度呢就根據(jù)滾動(dòng)高度去計(jì)算, 然后用js給電梯的div寫一個(gè)內(nèi)聯(lián)樣式,動(dòng)態(tài)的去改變

因?yàn)榻owindow注冊(cè)了一個(gè)scroll事件,當(dāng)你一滾動(dòng),會(huì)瘋狂觸發(fā)scroll,可能在線上的會(huì)導(dǎo)致瀏覽器有壓力(猜的)
所以自己寫了一個(gè)throttle方法去優(yōu)化這一塊,
然后在vue的原型對(duì)象中注冊(cè)了一下,可以在后續(xù)直接this.throttle只用

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

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

    var last;
    //定時(shí)器
    var timer;

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

        //判斷時(shí)間
        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;

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

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

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

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