Mobile页面项目总结

项目过去个把月了，一直没有写些东西总结下，这次借着年后的空隙，将当时记录下来的几个点回顾一下。

今明的布局：position技巧

每当看到类似横向并排布局的时候，总是想起定宽浮动，和下面讲到的列表并排不同，这里是指定输出的数据。并且你可以看到，在浮动的元素中，有一个元素与其他不同，我们将其他相同样式的元素称为时段导航，不同的单独称为日期导航。最初的认知告诉我要用ul标签，内嵌li标签来解决这个布局，可是在我尝试多次之后，并没有达到理想效果，日期导航和时段导航的留空和高度始终不和谐。之后，我分析了以下，之所以不适合完全用ul li 浮动来排版，是因为日期导航的样式实在是太区别于时段导航，让我们可以将它单独拎出来作为一个独立样式来实现。

我的方案是：时段导航仍用合适的ul li 来实现，而日期导航采用div标签定位{position:absolute; top:0; right:0;}来实现。这样，日期导航始终出现在目标区域的最右边，我只要关注时段导航的留白和高度，就能完全掌控日期导航的留白和高度，实现理想展示效果。

del引发的下划线：*{}去除，del{}特殊line-though

del标签在某些安卓系统的浏览器下会展示多余的底部下划线，即目标样式同时拥有删除线和下划线，看起来很不舒服。我采用的解决方案是用*去除所有下划线，然后指定目标样式为{ text-decoration:line-through;} 这样del在浏览器中的展示就统一了。

列表布局：width: Npx; 配合 overflow:hidden技巧

这个是小技巧，相信大家都知道。

我这里写出我的想法，我的认知告诉我像下面这种并列的大都是用定宽，加上浮动方案解决。这样浮动没有问题，问题就在于在控制中间留白的时候，我的思维限制于宽度中，就决定给奇偶项不同的margin值，奇数项是：margin-right;偶数项是margin-left;

这样有个弊端：必须要求后端给的数据是成双成对的，比如：6*6*4，如果其中参杂奇数：5*6*3，那么所展示的布局就会错乱。在这个项目中，这是完全不可控的，意味着随时有奇数对儿的数据出现，因此，这种奇偶对待的方案被完全否定。

 

我的一行两列方案：

 

我的留空方案：

 

列表导航随滚动条滚动，样式处理技巧

导航随高度智能漂浮是常见的UI展现方式，不过在实现的时候我踩了个大坑。实现思路很明确：当目标容器的top值小于滚动的高度时，目标容器的样式设置为{position:fixed;top:0;}

然后再赋予悬浮的样式，就能达到如下效果。

其中的坑在哪呢？简单的这么实现，你会发现，在PC浏览器上， 你拖动滚动条的时候目标容器会在临界值的边缘抖动，这很让人不爽。问题在哪里？没错，就是因为你野蛮的将目标直接从它的原始位置上拽了下来，导致整个web页面的布局发生变化，目标容器以下的元素都会自动上调位置，这就造成了难看的抖动画面。

我的解决方案是：将要转换样式的时候，保留目标容器的位置，即设置合适的宽和高。

 

总结

     

以上几点是我印象比较深刻的，虽然技术含量不高哦，但我想表达的是前端是个Magic，有很多方案可以实现设计师的效果，但要想用最舒适，最平滑的方案去实现，我们还是得花心思的，野蛮的实现可能只会带去不和谐的用户体验。

最后还是希望带给大家分享的快乐。算是起步吧。