吕形布局简介
顾名思义,吕字就是上面矩形,下面矩形。上面的矩形高度较小,通常固定在屏幕上,不会随着滑动手机而进行任何的移动。
目前流行的方案一种是直接认上栏,另一种是随着屏幕的滑动而慢慢出上栏。
我们来展示与一下吕形布局的以及它的使用场景。
吕形布局抽象起来是酱婶儿的:
除了上面几种方式实现吕形布局外,为了交互,我们还可能会把吕形布局做成随着屏幕的滑动而渐隐渐现的这么一种:
一方面我们可以利用现有的 CSS 库: 来实现吕形布局:
这种方式不仅利于我们的学习,更加有助于我们的记忆。
然后也会带领大家如何在不依赖于任何外界条件的情况下纯手工实现吕形布局:
作为扩展阅读,我们还提供了交互更加充满趣味性的渐隐渐现:
不过由于渐隐渐现必须用 JS 才能到的滚动距离,所以这章只作为扩展阅读,防止没有 JS 基础的小伙伴看了懵圈。