|
|
|
|
移动端

2.3 垂直排列

《微信小程序开发入门精要》第2章布局,本章主要介绍了小程序中的主要布局方式,通过这些布局,可以设计出各式各样的UI。本节为大家介绍垂直排列。

作者:李宁来源:人民邮电出版社|2017-12-13 15:15

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

2.3 垂直排列

只需要设置flex-direction的值为column,就可以将水平排列改成垂直排列,代码如下:

  1. <view class="flex-wrp" style="height: 300px;flex-direction:column;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

在这段代码中,将顶层view的高度设为300px,而每一个子view的高度是100px,所以垂直方向3个view会紧挨着显示,效果如图2-4所示。

在垂直方向,如果子view过多会怎么样呢?如下面代码所示。

  1. <view class="flex-wrp" style="height: 300px;flex-direction:column;"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. <view class="flex-item bc_green"></view> 
  6. <view class="flex-item bc_red"></view> 
  7. <view class="flex-item bc_blue"></view> 
  8. <view class="flex-item bc_green"></view> 
  9. <view class="flex-item bc_red"></view> 
  10. <view class="flex-item bc_blue"></view> 
  11. </view> 

如果使用上述的布局,会看到如图2-5所示的显示效果。

很明显,所有的子view都被压缩在垂直高度300px的空间内(宽度未改变),能否让垂直排列的子view折列呢?请看下一节的介绍。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

跨越网络工程师必备训练

本书是根据全国计算机技术与软件专业资格(水平)考试“网络工程师级考试大纲”编写的考试辅导用书。全书主体按考试大纲的章节编排,分上、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊