iView 實戰系列教程(21課時)_3.iView 實戰教程之佈局篇（一）

Grid佈局

先了解一下iview的24柵格佈局

清理一下App.vue


而後從iview的color裏面獲取推薦的背景色

咱們先渲染柵格 24列，而後再講解他是一個什麼東西：


柵格外面row包裹的，裏面是一個Col組件

使用v-for循環24列，類一列裏面用Card


Grid佈局就是將整個頁面等寬度的劃分爲了24列，能夠解決業務中大部分的佈局問題。

只要col的span的值相加等於24就能夠

咱們寫一個兩列的佈局，兩列分別值爲12，加起來就是24

若是說內容大於了24怎麼辦？

超出的部分自動換行了。

咱們在列和列之間加空隙：


空隙爲16寬度



Gutter的值建議是 16+8*n這樣排列：就是8的倍數

Gutter是16或者32是比較好的


裏面作一個嵌套，grid佈局是能夠無限嵌套的



某一列隨着瀏覽器的滾動，可以固定在某一個位置：

展現的效果。咱們但願右側的部分隨着瀏覽器的滾動，可以懸停


當前兩部分都是隨着滾動條 網上走的

如今咱們就須要固定右邊的列，
能夠單獨給右邊的card加css position：fixs
可是咱們儘量少使用css打到咱們想要的效果。

咱們把他嵌套在affix標籤內








頂部有個header的導航條。滾動的時候會吸在導航條的一個位置懸停




懸停會蓋住導航條


導航條的高度是50 因此這裏設置offset-top咱們設置爲50就能夠了


這樣就不會被蓋住了

佈局小技巧

24列布局實現垂直居中的效果
在modal中有個垂直居中的效果

彈窗是上下高度和左右的寬度都是同樣的，而且隨着拖動瀏覽器 也是會根據瀏覽器的高度和寬度的變化 依然垂直居中。





縮小瀏覽器的效果。


咱們要實現的效果就是 隨着改變瀏覽器的大小 頭像和對號都居中


Row佈局的flex佈局，而且規定了居中的方式 都是中間


全屏的狀況下 頭像和對號已經和頂部有必定的距離了

改變瀏覽器的大小

技巧2

4+18=22後面空出來一列




如今要實現的效果是讓第一列和第二列都居中顯示。也就是最左邊再空出來一列來。

Offset屬性就是給這一列一個向右的一個位移！，位移的尺寸就是柵格的列數

技巧3

20分鐘開始


規定左邊18列 右邊4列

左邊18列應該是在左邊的。可是因爲18列左邊是空的 因此把右邊的四列頂到了左邊。

當點擊左邊的填充內容的時候。18列有了內容顯示了出來。

假設填充內容是提供過ajax去填充的話，也是須要幾秒的時候閃動左邊的18列。那麼咱們怎麼解決這個默認沒有內容 右邊擠到左邊了呢？

咱們只須要在左邊的內容加一個空的div標籤就能夠了。 固然也能夠把這個空的div封裝成一個組件。

查看默認的頁面效果

這樣作的好處，不會影響裏面正文的內容，加一個1像素的空的元素去佔位的話，不會影響你大致的內容。雖然看起來不是很優雅，可是卻很簡單的解決了這個閃動的問題。比較推薦用這種方法。

使用iview的gird佈局 實現響應式佈局

響應式佈局：一套代碼在不一樣的屏幕或者分辨率下、瀏覽器中預覽的時候呈現出來的了效果是不同的


從新初始化代碼一下：


縮放到很小的時候：

在col上使用咱們響應式的屬性

左邊當小於768的時候 讓他佔滿一整行

當小於768的時候 佔滿一整行，當大於768的時候就是佔6列

當小於768的時候佔滿一整行，當大於768的時候只佔18列

咱們打開F12的控制檯 託送窗體，會顯示寬度和高度

小於了768的狀況：

當大於768的時候 仍是各自 6:18的比例


當時寬屏的時候 左邊留一個像素 右邊留一個像素
當變爲手機窄屏的時候

寬屏的時候 ，向右便宜一個列，6+16=22由於左右都便宜


小於768的時候 各自佔滿爲24

還有其餘用的比較少的 也能夠實現相應式佈局的，他們在flex佈局用的。視頻在這裏就很少講了。