|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 微信小程序 View 支持兩種布局方式:Block 和 Flex所有 View 默認都是 block 要使用 flex 布局的話需要顯式的聲明: display:flex; 下面就來介紹下微信小程序的 Flex 布局 先做一個簡單的 demo <view class="main">
<view class="item item1">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
</view>加上背景色能看的更清楚些 .main {
width: 100%;
background-color: antiquewhite;
}
.item {
height: 100rpx;
width: 100rpx;
}
.item1 {
background-color: red;
}
.item2 {
background-color: dodgerblue;
}
.item3 {
background-color: greenyellow;
}然后大概是這個樣子的:
然后我們先都加上 display: flex 好使用 flex 布局,主意,貌似 view 不會自動繼承,需要在每個想使用的 view 里都加上。 首先是橫向布局和豎向布局,要設置屬性 flex-direction ,它有4個可選值:
我們來看下設置 row 和 row-reverse 的區別: row:
row-reverse:
然后我們要設置元素在橫向上的布局方向,需要設置 justify-content 屬性,它有5個值可選:
然后我們要設置元素在縱向上的布局方向,需要設置 align-items 屬性,它有5個值可選:
子 View 還有個屬性 align-self,可以覆蓋父元素的 align-items 屬性,它有6個值可選:auto | flex-start | flex-end | center | baseline | stretch (auto 為繼承父元素 align-items 屬性,其他和 align-items 一致) 比如上面最后一個 baseline 的例子,我們把 item3 設置 align-self:flex-end; 就成了這個樣子:
此外還有 flex-wrap 屬性,用于控制子 View 是否換行,有3個值可選: 還有子 View 有個 order 屬性,可以控制子元素的排列順序,默認為0。 比如還是上面那個例子,我們把 item3 設置 order:-1; 可以把 item3 排在前面
flex 常用布局就這些 寫微信小程序的可以試試 最后,要是啥時候小程序能直接支持 bootstrap 就更好了 【相關推薦】 1. HTML5開發手機應用-詳細介紹viewport的作用(圖文) 3. HTML5 程序設計 以上就是微信小程序 View:flex 布局實例的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!