网站首页banner的高度计算

很快一周又过去了
这周收获到的,工作中的知识点总结


一, 网站首页banner的高度计算
网站首页在设计banner的高度的时候,需要保证一进入页面的时候,屏幕至少能显示一半出来,也就是说banner完全显示出来,下方的楼层也要显示一部分出来


  解决方法:
屏幕比例 16:9或者4:3,
求高度的时候 比例 9/16=0.5625
(如果是求宽度 比例是16/9)
网站的最小宽度是1200px,
所以 banner的高度是1200*0.5625=675
另外还有上方的header,header高是60
所以675+60=735
也就是banner的高度是735的时候做一些样式处理
然后配合媒体查询
屏幕的max-height : 850px的时候, banner的高度  565
屏幕的max-height : 750px的时候, banner的高度  495


二,页面的渲染
项目基于fis3+laravel,
用的是php的laravel框架和blade模板,
要完成一个页面,
实现方式一:
前端直接在blade模板当中写页面
比如一个导航  与后台协商好接口数据之后
模板当中这样写

//判断是否定义了变量  并且 变量里面有数据
@if (isset($navList) && count($navList))  
     <div class="items-wrapper col-l">
     @foreach ($navList as $item)        //循环这个变量  
       <a href="{{ $navList['href']) }}">{{$navList['label'] }}</a>  //输出变量中的href label
     @endforeach
     </div>
@endif

这样可以可以生成一个列表,
然后再在样式文件中定义样式,
如果有交互的效果,就在JS里编写
这种处理方式是数据在服务器处理,然后返回给前端一个页面.从而显示出来

实现方式二:
前端先获取后台返回的json数据,然后拼成html结构,显示在页面上,
这里涉及到一种类似bigrender的实现,(淘宝页面查看源代码的话 就能找到这些<textarea>)

比如 模板中写法如下

  <div class="course-wrapper">
//用一个textarea包着  
        <textarea style="display:none" autocomplete="off" data-id="course-data">
            {!! json_encode([
//后端的数据
                "floorItemList" => $recommendList,
                "extraDataList" => $extraDataList
//json编码  后端统一  不要中文字符编码
            ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
        </textarea>
//获取到数据前给一个loading提示
        <div class="loading">
            <i class="iconfont icon-cat icon"></i>
            <span class="text">数据加载中...</span>
        </div>
    </div>  

样式还是在css文件中定义

脚本当中
就要先发送一个ajax请求,获取后端的数据,把数据处理完成之后,再通过拼接字符串,生成html结构
这种处理方式,相当于客户端处理数据,

服务器端与客户端处理数据的最主要的不同是
服务器端处理数据的时候,如果页面的数据比较多,会造成加载缓慢,耗性能,
客户端处理的话,最大的缺点的是不利于SEO,因为内容都被<textarea>包起来,隐藏了,

所以采用的话还是得看业务需求.


现在面临的问题
写页面一般都没问题,不管是PC或者移动端的app,但是在涉及到交互方面
比如之前我遇到的问题是,面对一个交互需求,我不知道如何着手,完全没有思路,没有逻辑,
只能看别人写的或者搜索网上的例子,
现在遇到的问题是:面对一个交互需求,我明白它的实现原理,但是写的时候却卡壳了,写不出来
或者写了许多垃圾代码之后,调试了许久之后,才写出来
举个例子
比如类似一个select单选框,不用<select>标签,因为它自带的样式不好看,
所以采用<div>模拟一个出来,样式,结构很好写
比如一个ul 里面3个li
第一个li显示,第二,三个li隐藏,
然后鼠标移上去,第二,三个显示出来,供用户选择,
在用脚本实现点击选择的时候,
我知道它的原理是
比如点第二个li,就把第二个li放在第一位显示出来,原来的第一个放到第二个li的位置,
就是类似于两两交换位置,
同时需要点击的事件外面定义一个变量,用来保存当前的显示的那个li,
在点击事件里,两两换完位置之后,再更新一下那个保存li的变量,
我知道这个原理,但是我最开始写的时候.却无法下手,
等通过各种写,各种混乱的代码之后,才实现这个需求.


正常情况下,知道了需求,明白了原理,就是开始做,刷刷刷写完,搞定,
但是我却在明白了原理,到开始做的这一过程中,写不顺溜,