小程序實踐(六):view內部組件排版


  涉及知識點:

  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的使用

小程序實踐(十二):七牛雲上傳圖片

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM