刚刚学前端的时候看到携程网就乱拳敲打.一点点htmlcss强写,后面工作的原因用了vue,就推倒旧的重新写了.
页面结构是分为这几块:(如图)
普通的页面样式就不说啦.大家慢慢搭就好.share一些less的mixin方法.
//displayvertical集合#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:@sizesolid@color;border-left:@sizesolidtransparent;border-right:@sizesolidtransparent;border-bottom:@sizesolidtransparent;}}用的比较多的2个mixin就是上面这2个.一个是display的做布局使用,一个是人工三角形orz.如果想要用mixin的时候,需要在css中用@import的方法引入才能用.(用js的方式,破了好久破不了放弃)
因为我的样式是通过less写的.那就看着携程官网.一点点测试.一点点完善咯.没啥好办法.部分代码如下.
@mediascreenand(max-width:1200px){margin-right:20px;&:last-child{display:none;}}5.电梯这个电梯是存在于专题区里面的,所以我给每个专题的div添加了一个不用的类名,用来获取当前div的滚动高度.然后在钩子函数mounted()里面,去获取各个专题的高度
consts=document.getElementsByClassName('scroll-hook');for(letdomofs){letscoll_h=dom.offsetTop+dom.offsetParent.offsetTop;this.scroll_data.push(scoll_h);}电梯的精髓就是在:
那么就对应的写bie.
1.电梯的html渲染(ps.lift.index是每一个电梯的类名,lift_flag是区域的标识),然后在mounted()里给window注册一个scroll的监听事件,然后去获取当前的滚动高度,然后进行判断
因为给window注册了一个scroll事件,当你一滚动,会疯狂触发scroll,可能在线上的会导致浏览器有压力(猜的)所以自己写了一个throttle方法去优化这一块,然后在vue的原型对象中注册了一下,可以在后续直接this.throttle只用