Categories
程式開發

高仿瑞幸小程序 06 layout佈局


十年前,張小龍說過:“一個產品,要加多少功能,才能成為一個垃圾產品。”僅此一句話,道盡他做產品的理念。小程序就是其產品理念的最佳實踐,少即是多,小即是大。

今天,我們來繪製如下的界面

高仿瑞幸小程序 06 layout佈局 1

要實現以上佈局,我們需要學習以下三塊內容

1 通過圖片的寬度計算出圖片的高度2 學會使用row組件3 學會使用col組件

一 分析佈局

看看我們要實現的佈局,橫平豎直,方方正正,比例勻稱。其實這是非常容易實現的。我們將要用到vant組件庫的layout佈局系統。我們可以通過其中的row來實現橫向佈局。使用col實現豎向佈局。 row和col搭配起來,就能完成我們今天的佈局了。

首先我們來分析一下佈局,我們可以把整個佈局分為上下兩個row,如下:

高仿瑞幸小程序 06 layout佈局 2

ok,接下來,我們再用col填充row,如下圖:

高仿瑞幸小程序 06 layout佈局 3

最後一步是什麼呢?我們在每個col之中放入image組件即可。

高仿瑞幸小程序 06 layout佈局 4

至此,我們就完成了佈局的分析。為什麼要用row和col?因為它們有個非常厲害的屬性span。利用這個屬性,我們能實現按比例佈局。怎麼個按比例法呢?在vant的layout系統中,橫向被分為24分。如果要在row中放兩個一樣大小的col,只需要將將col的span設為24 / 2 = 12。以此類推,如果要放三個一樣寬的col,只需要將每個col的span設為24 / 3 = 8。這就實現了我們第二個row的佈局。

現在我們來分析一下第一個row怎麼佈局。我們通過觀察可知,第一個Row中有兩個col,他們的比例是2:1,所以第一個col的span為(24 / 3)* 2 = 16,第二個col的span為24 / 3 = 8 。這樣就實現了2:1的佈局。

二 通過圖片的寬度計算出圖片的高度

我們需要六張圖片,把它們放在雲存儲中。圖片資源我放在了github中,github的地址會在文章末尾放出。在這裡,它們的地址是:

高仿瑞幸小程序 06 layout佈局 5

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/01.png

高仿瑞幸小程序 06 layout佈局 6

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/02.png

高仿瑞幸小程序 06 layout佈局 7

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/03.png

高仿瑞幸小程序 06 layout佈局 8

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/04.png

高仿瑞幸小程序 06 layout佈局 9

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/05.png

高仿瑞幸小程序 06 layout佈局 10

cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/06.png

讓我們來想想,要完成佈局我們需要知道什麼?我們知道屏幕寬度,知道圖片左右邊距,知道圖片之間的距離,知道圖片之間的比例,那麼我們就知道了圖片的寬度。所以我們需要通過計算獲得圖片在屏幕上的高度。

為了讓圖片不變形,圖片在屏幕上的高寬比要等於圖片真實的高寬比,這就是我們計算的基礎。

圖片在屏幕的高/圖片在屏幕上的寬=圖片真實的高/圖片真實的寬

圖片在屏幕上的高 =  圖片在屏幕上的寬 * 圖片真實的高/圖片真實的寬

拿第一個row中的第一張圖片來說,它真實高是666,寬是330。

那麼怎麼得到它在屏幕上的寬呢?可通過以下的簡單公式進行計算:

屏幕寬度-左右外邊距(margin)-左右內邊距(padding)-與右邊圖片的距離

即是

750 - 40 - 40 - 6 = 664

所以它在屏幕上的高度就是 664 * 330 / 666

通過以上的方法,我們能算出每一張圖片在屏幕上的高度

三 row與col組件

我們該怎麼理解row與col呢?其實就是表格中的“行”與“列”。它們除了有能設置佔位比例的span屬性,row還有能設置元素間間距的gutter屬性。還有一些其他屬性,例如佈局方式type,對齊方式justify,align,偏移量offset。點擊時觸發的click事件。這裡就不做詳細介紹了,有興趣的同學可以去官方查看,地址如下

https://youzan.github.io/vant/#/zh-CN/col

讓我們來看看,我們在這一節中是如何實際運用的。

首先,我們需要打開app.json,在“usingComponents”屬性中引入我們今天要用到的三個組件,row,col和image

"usingComponents": {

"van-image": "@vant/weapp/image/index",

"van-row": "@vant/weapp/row/index",

"van-col": "@vant/weapp/col/index"

}

接下來,我們來創建一個view用來存放我們的row

給它一個樣式

.mid_menu{

  margin-top: 50rpx;

  margin-left: 20rpx;

  margin-right: 20rpx;

  background-color: white;

  border-radius: 30rpx;

  padding: 20rpx;

}

margin-top設置了頂邊距

margin-left 和 margin-right分別設置了左邊距與右邊距。

background-color:設置了背景色為白色

padding設置了內邊距

border-radius:設置了圓角半徑

對於第一個row來講,我們需要放量個col進來,還記得它們的比例嗎?是2:1,也就是16:8

放一张图片

放两张图片

別忘了我們要設置這兩個col之間的間距為6,也就是設置row的gutter的值。

接下來,我們只要在col中放入image組件就好,這裡我們使用了vant組件庫中的vant-image,這是一個非常方便的同時封裝了很多強大功能的組件。例如我們可以直接設置它的高寬屬性。由於我們已經使用span屬性分配了它們的寬度比例,所以每一個image的寬只需要設置100%就好,而它的高,我們會綁定在一個計算好的屬性中。例如rowHeight,

height=“{{rowHeight}}rpx" 别忘了单位是rpx。

而這個屬性放在哪裡呢?如果大家有印象的話,我們存放在js文件的data對像中。

data: {

……

rowHeight:0,

……

}

而rowHeight的計算,我們會放在attached函數中。

而attached又是什麼呢?我們來複習一下,這是當組件完成初始化,進入頁面節點樹後會被觸發的函數。

如此就完成了第一個row的繪製。

第二個row來說就更加簡單了,它分為三個等比例的col

同樣,col中的image的寬度設為100%,而高度需要計算。讓我們來看看完整代碼

js文件

//在rpx的单位下,屏幕的宽度都为750
const winWidth = 750

const rowWidth = (winWidth - 80-6)*2/3
const rowHeight = rowWidth * 330/666

const rowWidth2 = (winWidth - 80 -12)/3
const rowHeight2 = rowWidth2 * 315/324

說了一大堆,其實代碼沒多少。完整代碼我放在了github上,地址是:

https://github.com/gogoswift/luckin

這個系列的文章列表

我所想的跨平台開發:小程序 +App+Web

高仿瑞幸小程序 00 準備工作

高仿瑞幸小程序 01 初建項目,引入 Vant Weapp

高仿瑞幸小程序 02 創建 Tabbar

高仿瑞幸小程序 03 創建輪播圖

高仿瑞幸小程序 04 小程序的全局數據

高仿瑞幸小程序 05 更正輪播組件的高度計算

高仿瑞幸小程序 06 layout 佈局

高仿瑞幸小程序 07 為你推薦模塊