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

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

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

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

build/config配置文件

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

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

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

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

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

包括logo的header

導(dǎo)航欄

icon快捷入口

廣告swipe和搜索框

各專(zhuān)題區(qū)

底部快捷入口

底部

電梯

fixed的交互框

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

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

然后通過(guò)每個(gè)需要數(shù)據(jù)的頁(yè)面去引入這個(gè)mock.js...

普通的頁(yè)面樣式就不說(shuō)啦.大家慢慢搭就好.
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的方式,破了好久破不了放棄)

引入之后直接在頁(yè)面里面使用即可

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

.arrow_down(3px, #fff);

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

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

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

    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í),頁(yè)面會(huì)滾到對(duì)應(yīng)的區(qū)域;

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

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

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

    

        {{lift.name}}
    
  

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

//頁(yè)面滾動(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(() => {
            //解決兼容性問(wèn)題(原本使用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(() => {
            //解決兼容性問(wèn)題
            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寫(xiě)一個(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)致瀏覽器有壓力(猜的)
所以自己寫(xiě)了一個(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;

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

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

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

最后最后,攜程在手,說(shuō)走就走.