呂形布局簡(jiǎn)介

1. 前言

顧名思義，呂字就是上面一個(gè)矩形，下面一個(gè)矩形。上面的矩形高度較小，通常固定在屏幕上，不會(huì)隨著用戶滑動(dòng)手機(jī)而進(jìn)行任何的移動(dòng)。

目前流行的方案一種是直接默認(rèn)顯示上欄，另一種是隨著屏幕的滑動(dòng)而慢慢顯示出上欄。

2. 呂形布局

我們來(lái)展示與一下呂形布局的效果以及它的使用場(chǎng)景。

呂形布局抽象起來(lái)是醬嬸兒的：

一般會(huì)把跳轉(zhuǎn)頁(yè)面、搜索、下載或者歷史記錄等功能放在上面固定在屏幕上的矩形內(nèi)，可以簡(jiǎn)單的把它理解為標(biāo)題或功能區(qū)：

上面的矩形寬度充滿屏幕，并提供一系列的按鈕，每當(dāng)點(diǎn)擊時(shí)上方矩形按鈕時(shí)下方矩形就會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面，通常上方的一排按鈕會(huì)有其中一個(gè)高亮顯示，以告知用戶當(dāng)前所在的頁(yè)面是哪一個(gè)。

3. 漸隱漸現(xiàn)

除了上面幾種方式實(shí)現(xiàn)呂形布局外，為了增加交互效果，我們還可能會(huì)把呂形布局做成隨著屏幕的滑動(dòng)而漸隱漸現(xiàn)的這么一種效果：

這種效果主要是通過(guò)了JS來(lái)獲取到屏幕的滾動(dòng)距離，然后隨著距離的增加來(lái)動(dòng)態(tài)控制透明度，增加了交互的趣味性。

4. 實(shí)現(xiàn)手段

一方面我們可以利用現(xiàn)有的 CSS 中文庫(kù)：chinese-layout 來(lái)快速實(shí)現(xiàn)呂形布局：

• 中文布局 CSS 庫(kù)

這種方式不僅利于我們的學(xué)習(xí)，更加有助于我們的記憶。

然后也會(huì)帶領(lǐng)大家如何在不依賴于任何外界條件的情況下純手工實(shí)現(xiàn)呂形布局：

• 固定定位法
• 外邊距的作用
• 非固定定位

作為擴(kuò)展閱讀，我們還提供了交互更加充滿趣味性的漸隱漸現(xiàn)效果：

• 固定定位 + 漸隱漸現(xiàn)

不過(guò)由于漸隱漸現(xiàn)效果必須用 JS 才能獲取到當(dāng)前頁(yè)面的滾動(dòng)距離，所以這章只作為擴(kuò)展閱讀，防止沒有 JS 基礎(chǔ)的小伙伴看了懵圈。

5. 小結(jié)

大家可以記住呂形布局的抽象圖，然后在玩手機(jī)的時(shí)候可以看看都有哪些網(wǎng)站運(yùn)用到了呂形布局。