小程式實踐(六) view內部元件排版

2022-02-09 18:09:17 字數 1909 閱讀 6362

涉及知識點:

1、垂直排列,水平排列

2、居中對齊

示例:

1、預設排版 , 乙個父元件裡面兩個子view

顯示效果:

2、先給父view設定乙個高度和顏色值,用於看效果

3、實現水平排列和垂直排列的樣式

水平排列:

垂直排列(不進行設定,預設垂直排列):

4、實現居中效果

居中效果分為兩種情況,依賴於3中的水平排列還是垂直排列。

①、當水平排列的時候  ,justify-content:center ; 決定水平居中

②、當水平排列的時候,align-items:center; 決定垂直居中

③、當垂直排列的時候,justify-content:center; 決定垂直居中

------------------------>

④、當垂直排列的時候,align-items:center;  決定水平居中

------------------------>

⑤、當 align-items:center; 和 justify-content:center; 都存在的時候,不管父view怎麼設定的排列方向,他的子view都是水平垂直都居中

------------------------>

小程式實踐(一):主頁tab選項實現

小程式實踐(二):swiper元件實現輪播圖效果

小程式實踐(三):九宮格實現及item跳轉

小程式實踐(四):動態控制項的顯示/隱藏

小程式實踐(五):for迴圈繫結item的點選事件

小程式實踐(六):view內部元件排版

小程式實踐(七):頁面間傳值

小程式實踐(八):驗證碼倒計時功能

小程式實踐(九):返回到上乙個介面並傳值回去

小程式實踐(十):textarea實現簡單的編輯文字介面

小程式實踐(十一):showmodal的使用

小程式實踐(十二):七牛雲上傳

小程式view排版

demotext view 行排列view view view view view view 列排列view view view view view view 向左靠攏view view view view view view 向右靠攏view view view view view view 左右...

小程式view選中新增樣式

做乙個充值選擇 的頁面,沒有用radio,直接用view做的效果,用radio傳值比較方便。wxml data price 不需要列印 出來可去掉。wxss cont border conts conts view conts text active conts active conts textj...

微信小程式 view覆蓋

目錄 最終效果 view覆蓋 主要屬性 父布局 position relative 子布局 position absolute view層級順序 數值越高就離使用者越近 z index 1 實現步驟 父布局 最外層布局 position relative z index 1 parent style...