vue模拟携程官网的搭建

仿造携程官网

题外话:

刚开始学前端的时候,有一天看到携程官网.就希望有一天能模拟搭出来.
自己拖拖拉拉的一直没整, 但是但是麻麻我终于完成了!!
(曾经亲爱的同事把传送门删掉了不感谢他了 fk)
感谢叶师兄拯救了我携程携程 源码仿携程源码

目录结构

  • 基于vue+less进行开发,配合强行在携程复制的数据搭建的网站
  • 目录是基于vue-cli的基础下搭建的.

  • build/config配置文件
  • src是主要内容(assets包括公用的js文件,css样式/components是公用组件/module是页面)
  • dist是打包后的文件夹 node_modules是依赖包 其他就是默认的配置文件

思路

小小讲一下自己拿到携程官网的时候是怎么拆开的(如果写的不对请麻烦各位指出指导)

1.首先是静态页面

刚刚学前端的时候 看到携程网就乱拳敲打.一点点html css强写,
后面工作的原因用了vue,就推倒旧的重新写了.

  • 页面结构是分为这几块:(如图)

    1. 包括logo的header
    2. 导航栏
    3. icon快捷入口
    4. 广告swipe和搜索框
    5. 各专题区
    6. 底部快捷入口
    7. 底部
    8. 电梯
    9. fixed的交互框

  • 有页面结构之后.就是基本功了.然后一点点搭页面, (优化把公用组件抽出来.)

2.然后是页面数据

哎,没想到好的办法.就搭页面的时候,顺便在携程网上面一点点的copy下来.
(我看隔壁的仿页面贴都是通过接口的.小弟还是菜了点)

然后通过每个需要数据的页面去引入这个mock.js...


3.样式

普通的页面样式就不说啦.大家慢慢搭就好.
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);

4.响应式布局

因为我的样式是通过less写的.
那就看着携程官网.一点点测试.一点点完善咯.没啥好办法.
部分代码如下.

@media screen and (max-width: 1200px){
            margin-right: 20px;

            &:last-child{
                display: none;
            }
        }   

5.电梯

这个电梯是存在于专题区里面的,所以我给每个专题的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);
    }

电梯的精髓就是在:

  1. 根据当前的滚动高度,然后动态改变active的标识;
  2. 点击对应的标识,页面会滚到对应的区域;
  3. 页面滚动的时候,在某个固定的位置待着

那么就对应的写bie.

1.电梯的html渲染(ps. lift.index是每一个电梯的类名, lift_flag是区域的标识),然后在mounted()里给window注册一个scroll的监听事件,然后去获取当前的滚动高度,然后进行判断

<ul class="lift-wrapper" :style="`top:${lift_top}px;`">
    <li
        class="lift-item"
        :class="[lift.index,  {‘lift-active‘: (lift_index === lift_flag)}]"
        v-for="(lift,lift_index) in d"
        @click="lift_click(lift_index)">
        <span class="skip">{{lift.name}}</span>
    </li>
</ul>  

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写一个内联样式,动态的去改变


6.throttle事件

因为给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;

7.lazyload

页面大了一进入就触发全部的请求,肯定不那么棒,所以此处引入了lazyload.
携程的lazyload除了图片.还有每个专题区(忽略爱心 - -).

ps.最开始引用了vue-lazyload这个模块,然后里面有一个lazyComponent配置项,可以用来设置一整块的,但是这个有一个不足的地方,就是当你页面在比较下面的时候去刷新, lazyComponent只会update当前可视区域的部分,可视区域上面的区域就不管你........
pss.所以我自己通过上面的电梯,自己写了一个,然后将flag标识通过组件之间传入,然后组件内部通过watch去监控.然后动态从初始化状态更新为内容区.


结尾

其实就是一个普通的页面搭建,大家如果有空其实一点点就能搭出来的,
不知道强行分享的东西有没有更好的方法呢,如果有麻烦各位指导一下小弟.
以上完毕,感谢大家感谢大家.(如果侵权了,马上下架,仅供交流学习)

最后最后,携程在手,说走就走.

原文地址:https://www.cnblogs.com/10yearsmanong/p/12207064.html

时间: 2024-10-09 01:50:39

vue模拟携程官网的搭建的相关文章

学习phalcon框架按照官网手册搭建第一个项目注册功能

中文手册官网:http://phalcon.ipanta.com/1.3/tutorial.html#bootstrap 官网提供http://www.tutorial.com项目源码github地址:https://github.com/phalcon/tutorial 搭建时候需要注意的问题: 1.虚拟主机的搭建: <VirtualHost *:80> DocumentRoot "D:/web/tutorial/" ServerName www.tutorial.com

利用Python与selenium自动化模拟登陆12306官网!

近年来,12306的反爬越来越来严重,从一年前的 获取tk参数后到现在增加了 JS.CSS等加密方式! 目前大部分人利用的登陆方式都是利用selenium ,此文也不例外. 环境:        Windows python 3.6.5 模块:      selenium pyautogui      time 第一步: 实例化一款浏览器,并进入到12306官网 driver = webdriver.Chrome() driver.get('https://kyfw.12306.cn/otn/r

CentOS下安装和配置MySQL-JDK-Tomcat-Nginx(个人官网环境搭建手冊)

今天,又一次弄我的个人云主机的环境.准备运营自己用Java写的个人官网等站点. 服务器环境:阿里云CentOS 6.4位 包含以下脚本在内的绝大部分命令和脚本,都是我亲自运行过,靠谱的. 完整的"运营运维"经验,请參考我的CSDN博客-运营运维 分类:http://blog.csdn.net/FansUnion/article/category/1714547 1.mysql 1.1 安装mysql yum install mysql-server 1.2 启动mysql,服务名字是&

CentOS下安装和配置MySQL-JDK-Tomcat-Nginx(个人官网环境搭建手册)

今天,重新弄我的个人云主机的环境,准备运营自己用Java写的个人官网等网站. 服务器环境:阿里云CentOS 6.4位 包括以下脚本在内的绝大部分命令和脚本,都是我亲自执行过,靠谱的. 完整的"运营运维"经验,请参考我的CSDN博客-运营运维 分类:http://blog.csdn.net/FansUnion/article/category/1714547 1.mysql 1.1 安装mysql yum install mysql-server 1.2 启动mysql,服务名字是&q

2.实现官网环境, 搭建HTTP服务器

1.建立 HTTP 服务器 Node.js 是为网络而诞生的平台,但又与 ASP.PHP 有很大的不同,究竟不同在哪里呢?如果你有 PHP 开发经验,会知道在成功运行 PHP 之前先要配置一个功能强大而复杂的 HTTP 服务器,譬如 Apache .IIS 或 Nginx ,还需要将 PHP 配置为 HTTP 服务器的模块,或者使用 FastCGI 协议调用 PHP 解释器.这种架构是"浏览器 ? HTTP 服务器 ? PHP 解释器"的组织方式,而Node.js采用了一种不同的组织方

去哪儿携程酒店五折大战十大对比分析

近日由去哪儿率先发动的酒店五折大战再次引发了整个酒店市场的集体恐慌,而艺龙携程的跟进则无疑让这场风暴变得更加猛烈.携程和去哪儿分别作为整个在线酒店预订市场的老大和老二,今天他们二者的一颦一笑都会影响到整个酒店市场.那么,这一次的五折大战究竟胜负会如何?我们先来看看这一次去哪儿和携程的酒店促销活动: 去哪儿:这一次去哪儿将5折酒店促销推广到全国,范围涉及到300多个城市,参与酒店多达20多万家,完全由去哪儿自掏腰包补贴,且目前暂无截止的迹象. 携程:携程推出的酒店5折促销活动计划实施时间为2015

瑞星:切莫忽视信息安全 携程事件为互联网企业敲响警钟

5月28日,国内爆出了堪称今年最大的互联网信息安全事件:携程旅行网除首页外突然全部瘫痪,打开主页后点击任意链接显示"Service Unavailable",而百度搜索上的携程官方页面也显示404错误.稍后,携程官方发出回应,称因携程部分服务器遭到不明攻击,导致官方网站及APP暂时无法正常使用.不过据业内人士传闻,本次事件是数据库被物理删除所致. 该消息一出立刻震惊了全国,在微博.微信朋友圈中得到了疯狂的转发.当看到这条消息时,博主心中便有了很大的疑问,众所周知,携程是国内旅行网站的巨

携程第四代架构探秘之运维基础架构升级

作为国内最大的OTA公司,携程为数以亿计的海内外用户提供优质的旅游产品及服务.2014年底携程技术中心的框架.系统和运维团队共同启动了架构改造项目,历时2年,涉及所有业务线.本文回顾了携程在整个技术架构改造过程中的一些实践和收获. 一.写在前面 随着携程业务量迅速增长.业务变化越来越敏捷,对于应用交付的效率也提出了更高的要求.根据统计,截止2014年底携程总应用数在5000个左右,平均每周约有3000次以上的发布需求.所以作为整体交付环节中极为重要的一环,应用的部署和发布是提高交付效率的关键,然

OTA“多角恋”:携程闪电入股同程、途牛

OTA"多角恋":携程闪电入股同程.途牛 2014年04月30日 16:38 来源:南方都市报 参与互动(0) "携程将把景点门票的现付业务接入同程,并向同程投资超过2亿美金,支持同程独立IPO."4月28日晚间,同程网CEO吴志祥以发布内部邮件的形式,"向大家报告一个好消息." 而就在十来天前,同程旅游刚与艺龙旅行网签署了战略合作协议.据业内知情人士透露,伴随此次入股,携程与同程之间签署了一份"缓冲期"协议.即一年后,同程将