小程式開發（flex詳解）
？遇到的問題
- 1、tabBar切換，改變導航條的標題
在頁面的.json裡面編寫，注意在根節點寫，不要畫蛇添足加windows節點！！
{
"navigationBarTitleText": "我是標題",
}- 1
- 2
- 3
- 2、無法直接用本地圖片設定為View標籤背景圖片
微信報錯提示：本地資源圖片無法通過 WXSS 獲取，可以使用網路圖片，或者 base64，或者使用標籤。
解決方案：
1、使用網路圖片:
background-image: url(“https://xxxx/xxx.jpg“);
2、將背景圖片使用編碼base64進行轉換（缺點是一大段亂碼，不方便閱讀）
可以在這個網址進行http://www.css-js.com/tools/base64.html 轉換，如：background-image: url(“轉換後得到的編碼文字”），如果多次使用的話可以將該值設定為全域性變數，再在js檔案進行引用即可；
3、使用image元件而去掉背景圖片；
！UI佈局基礎
Flex佈局（能實現浮動佈局的所有功能）、相對定位和絕對定位
Flex佈局
整個灰色矩形是一個容器，item1和2是子元素。可自定義主軸和交叉軸的方向。
屬性
- Flex 容器屬性
- flex-direction
決定元素的排列方向
- flex-wrap
決定元素如何換行（排列不下時）
- flew-flow
flew-direction和flew-wrap的簡寫
- justify-content
元素在主軸上的對齊方式
- align-items
元素在交叉軸的對齊方式
- Flex 元素屬性
- flex-grow
當有多餘空間時，元素的放大比例
- flew-shrink
當空間不足時，元素的縮小比例
- flew-basis
元素在主軸上佔據的空間
- flex
是grow、shrink、basis的簡寫
- order
定義元素的排列順序
- align-self
定義元素自身的對齊方式（這個屬性會覆蓋容器的justify-content和align-items屬性的作用）
來來來，實踐一把！
刪掉app.json的樣式，
/**index.wxml**/
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item">
3
</view>
<view class="item">
4
</view>
</view>
/**index.wxss**/
.container{
height: 100 - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
效果圖一：
修改為flex容器
/**index.wxss**/
.container{
height: 100%;
width: 100%;
background-color: fuchsia;
display: flex; //指明作為flex容器
}
.item{
width: 100rpx;/*微信小程式獨有的畫素單位，隨螢幕解析度動態變化*/
height: 100rpx;
border: 1px solid #fff;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
效果圖二：
ok,我們好像理解了什麼！！！小程式的View標籤類似於一個div，而div是塊元素，塊元素是佔一行的寬度的，flex類似於css的浮動功能，把塊元素變成了行內元素，將所有元素都擠到一行去咯。。
好，接下來我們繼續實踐其它容器屬性的用法
我們增加如下一行：
flex-direction: row;- 1
是的，效果一樣。說明了元素的排列方向預設是按行排列（橫線排列）。。我們將row換成column，效果則與圖一相同（豎向排列）。ok，flex-direction屬性就是決定主軸和交叉軸的位置，row是從左到右是主軸，column則是從上到下為主軸，row-creverse是從右到左是主軸，column-reverse是從下到上為主軸。
flex-wrap ： 決定元素如何換行（排列不下時） 可選值：nowrap、row、row-reverse，分別為不換行，換行、反轉換行。預設是不換行，無論我們增加多少view的數量，都會預設擠到一行，壓縮view的寬度。
justify-content 元素在主軸上的對齊方式 可選值：flex-start、flex-end、center，space-around、space-between,分別為左對齊、右對齊、居中對齊、每個元素兩邊間隔相等、兩端對齊中間每個元素間隔相等；
align-items 元素在交叉軸的對齊方式 可選值：flex-start、flex-end、center，stretch,baseline 分別左對齊、右對齊、居中對齊、當元素沒設定高度就會佔滿容器的高度(主軸是row或row-creverse時)、根據文字的基線對齊。
哈哈，baseline不好理解，於是在舉個栗子吧！！
首先，假如有個需求–調整view裡面的文字的位置
ok,看程式碼和效果圖
/**index.wxml**/
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
/**index.wxss**/
.container{
height: 100%;
width: 100%;
background-color: cornflowerblue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.item{
width: 100rpx;/*微信小程式獨有的畫素單位，隨螢幕解析度動態變化*/
height: 100rpx;
background-color: fuchsia;
border: 1px solid #fff;
}
.i3{
display: flex;
align-items: flex-end;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
我們為第三個view新增多一個樣式，讓它也成為flex容器，並且讓它的元素（即文字）的位置在下方。
效果圖3：
ok,這時候，如果我們把align-items: flex-start; 改成align-items: baseline;
效果圖4：
怎麼樣？！是不是好理解一些了，，就是按文字基線排列的。。
說完flex容器的屬性，我們來研究下flex元素的屬性咯！！！！！！！！！！！！！！
flex-grow 當有多餘空間時，元素的放大比例；預設元素的大小我們指定寬高後即使容器有多餘空間也不會佔用容器的空間，即flex-grow: 0，如果我們設定值為1，那麼元素就會佔用多餘空間。
flew-shrink 當空間不足時，元素的縮小比例。預設會縮小值為1，0則為不縮小。還可以有其它值，類似壓縮權重，按比例壓縮。
flew-basis 元素在主軸上佔據的空間，指定具體的大小咯。rpx好像不起效，px可以。
order 定義元素的排列順序，值是索引值，從1開始。
align-self 定義元素自身的對齊方式（這個屬性會覆蓋容器的justify-content和align-items屬性的作用）。。。這個我測試好像不起效果，原因可能是container容器沒有充滿頁面？？？？！！！！！
相對定位和絕對定位
相對定位的元素是相對自身左上角進行定位，參照物是自己；
絕對定位的元素是相對離它最近的一個已定位的父級元素進行定位；
明明flex佈局很牛逼，為啥還要學這個！！！！？？？
因為有一種情況，兩個元素之間如果需要重疊和覆蓋！！！flex佈局是做不到的呀！！！
舉個相對定位的栗子！
<!--index.wxml-->
<viewclass="container">
<viewclass="item">
1
</view>
<viewclass="item">
2
</view>
<viewclass="item i3">
3
</view>
<viewclass="item">
4
</view>
</view>
/**index.wxss**/
.container{
width: 100%;
height: 100%;
background-color: cornflowerblue;
display: flex;
flex-direction: column;
}
.item{
width: 100rpx;/*微信小程式獨有的畫素單位，隨螢幕解析度動態變化*/
height: 100rpx;
background-color: fuchsia;
border: 1px solid #fff;
}
.i3{
position: relative;
left: 130rpx;
top:30rpx;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
效果圖5：
舉個絕對定位的栗子！
<!--index.wxml-->
<viewclass="container">
<viewclass="item">
1
</view>
<viewclass="item">
2
</view>
<viewclass="item i3">
3
</view>
<viewclass="item">
4
</view>
</view>
/**index.wxss**/
.container{
width: 100%;
height: 100%;
background-color: cornflowerblue;
display: flex;
flex-direction: column;
}
.item{
width: 100rpx;/*微信小程式獨有的畫素單位，隨螢幕解析度動態變化*/
height: 100rpx;
background-color: fuchsia;
border: 1px solid #fff;
}
.i3{
position: absolute;
left: 130rpx;
top:30rpx;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
效果圖6：
ok，用法都是很簡單的，只需要在具體的元素裡設定position屬性，指定是relative或absolute即可。