「4.0」一我的開發一個App,小程序從0到1,佈局

一提到佈局這個詞,我老是索索發抖,不是由於天冷,而是由於佈局的目標實在太宏大。古代想雄霸天下的王,就喜歡佈局這個,佈局那個,結果硬生生把本身的國家給佈局沒了。至因而哪一個君王,我倒能夠很是認真,很是坦誠地告訴你,那我的不是我,也不是你。程序員

不然咱們哪有時間在這裏用小程序佈局手機界面。一個小小手機界面,就有不少花樣,那跟大餅臉臉同樣大的平板, 不是須要花費更多功夫?web

其實能夠不是的,只要你在佈局界面的時候,留多點空白就行了。更最簡單的辦法,就是所有空白,什麼都不放,只是這樣的話,老闆會讓你早點滾蛋。若是不想滾,仍是老老實實地佈局吧。小程序

4.1  佈局瀏覽器

小程序的佈局,可從左到右,從上到下;可從右到左,從下到上;可左青龍右白虎,上朱雀下玄武。反正,正反均可以,你喜歡就好。微信

若是從左到右佈局,那就是橫向佈局;從右到左,那就是反橫向佈局;若是從上到下,就是縱向佈局,從下到上,就是反縱向佈局。橫縱佈局,是古代兵家經常使用的戰略,沒想到程序員也懂。開不開心,雞不雞凍,嘚不嘚瑟?xss

若是你剛剛說開心,說雞凍,說嘚瑟,那你完了,你高興得太早了,畢竟小程序佈局的技術,Flex都還沒開始學,等學會再嘚瑟吧。佈局

Flex是Flexible Box的縮寫,意爲」彈性佈局」,能夠支持從左到右,從上到下,flex

從右到左,從下到上,左青龍右白虎,上朱雀下玄武。spa

先來左右和上下的,而後,而後就沒有而後了。打開index.wxss,洋洋灑灑地敲下以下代碼。3d

/* 橫向佈局:從左到右 */

.zy {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

color: #fff;

}

/* 縱向佈局:從上到下 */

.sx {

display: flex;

display: -webkit-flex;

flex-direction: column;

align-items: center;

color: #fff;

}

打開index.wxml,洋洋傻傻地輸入以下內容,並運行看看效果,漂不漂亮,正不正點?--說漂亮的都是藝術家,說正點的都是色鬼,愛顏色的鬼。愛顏色的鬼,就是那些最喜歡研究Flex(佈局)的色鬼。

<view class="zy">

<view>第1格</view>

<view>第2格</view>

</view>

<view class="sx">

<view>第3格</view>

<view>第4格</view>

</view>

4.2  Flex

又到我秀英語的時刻了,我不用查詞典就能夠負責地告訴你:Flex是Flexible Box的縮寫,是彈性佈局的意思,Understand?就算不stand也不要緊的,我仍是要接着說的。

flex經過display聲明,用flex-direction指定佈局方向。

4.2.1 佈局方向

左到右值爲:row(默認值);

右到左值爲:row-reverse;

上到下值爲:column;

下到上值爲:column-reverse。

4.2.2 橫向對齊

在橫向佈局時,可經過justify-content指定項目的對齊方式。

左對齊:flex-start;

居中對齊:center;

右對齊:flex-end;

兩端對齊:space-between,項目之間的間隔都相等;

間隔相等:space-around,每一個項目兩側的間隔;

左青龍右白虎值爲:暫不支持,圖片來安慰。沒青龍白虎的,不要找我要,這兩個寵物我不賣。

若是橫向內容有太多的話,怎麼對齊都沒用,由於根本放不下。這時可用flex-wrap指定是否換行。nowrap(默認),不換行;wrap:換行,第一行在上方;wrap-reverse:換行,第一行在下方。

4.2.3 縱向對齊

縱向佈局,經過align-items的值指定。

上對齊:flex-start;

居中對齊:center;

下對齊:flex-end;

自動對齊:stretch(默認值), 佔滿整個容器的高度;

上朱雀下玄武:暫不支持,圖片來安慰,沒有朱雀玄武的不要找我要,這兩個家禽你養不起。

糟了,原本打算介紹代碼的,沒說到動物世界去,這可怎麼辦?--涼拌炒雞蛋,我就亂說一通,看你能把我怎麼樣?--疼,疼,疼,別再打了。再打我就跟產品經理同樣,沙雕了。

一沙雕,突然發現有個-webkit-flex沒做解釋。可這個真沒什麼好解釋的,它就是爲了兼容Webkit內核的瀏覽器(如蘋果的Safari)而存在的,你加上就對了。若是實在想弄清楚緣由的話,那就打電話給微信的產品經理吧。

你繼續打你的電話,我接着往下說,說下平均佈局。

4.3  平均佈局

在index.wxss文件裏,新增以下代碼,可以讓橫向項目(view)平均分配。這種寫法,表示在zy下的view組件(項目),都應用這個樣式。這是一種特高級寫法,通常人都學不會,你看兩眼就懂了,厲害,厲害。來,給本身一把掌,權當獎賞。打完以後,能夠了解一下與子項目相關的屬性。

.zy view {

flex: 1;

border: 1px solid red;

text-align: center;

}

 

4.3.1 子項目屬性

在父(zy)元素flex下的子項目,有6大屬性。

1. order屬性

用來排列項目順序,值(正整數)越小,越靠前;這有插隊嫌疑,原本2排在1後面,卻可經過order這個關係,走到1前面去;

2. flex-shrink屬性

指定項目縮小比例(正整數),當空間不夠時,誰被指定,誰就縮小,誰都不指定,你們一塊兒縮小,好啊,大有有福同享有難你當的滋味;

3. flex-grow屬性

默認值爲0。有了,才能夠分。這是一個程序員哥哥分梨的故事,程序員對他弟弟說:我是哥哥,比你大,我讓着你,我分2個,你分1個。

在index.wxss文件裏新增以下代碼:

/*哥哥來分梨*/

.fl {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

color: #fff;

}

.dd {

flex-grow: 1;

border: 1px solid red;

text-align: center;

}

.gg {

flex-grow: 2;

border: 1px solid red;

text-align: center;

}

在index.wxml裏,新增以下代碼:

<view class="fl">

<view class="dd">弟弟</view>

<view class="gg">哥哥</view>

</view>

4. align-self屬性

容許指定的單個項目,可與其餘項目不同的對齊方式。

5. flex-basis屬性

指定的項固定大小(長度值,如200rpx)。其他的別人去分配。

這跟項目經理分配獎金時,是一個樣的。1萬塊的獎金,先給本身留9900元,剩下的100元,由10個程序員自由分配。至因而否真有這回事,我也不清楚。我沒當過項目經理,我一直當的是技術總監。別打我啊,哎呀,哎呦,疼,痛,並快樂着。

6. flex屬性 

flex-grow, flex-shrink 和 flex-basis的簡寫,默認值爲0 1 auto。後兩個屬性可選。

好了,今天碼字碼到都得帕金森了,手一直在抖。若是文章對你有所幫助,就轉發出去吧。你一轉發,個人手立刻就好,立刻開始續寫篇章,譜寫下一節的內容,組件組建。

相關文章
相關標籤/搜索