微信小程序-视图容器view

欢迎大家关注我的个人微信订阅号 A321之旅。

视图容器，倘若进行分开理解，视图就是希望用户所看到的，而容器则是指可以包容其他的功能组件，从整个页面的角度理解为占位符，而从所包含的功能组件的角度理解为框架。个人理解，此为所有组件中最重要的一个。

视图容器中最基本的，最常用的是 view，可以实现对整个页面的划分，实现页面布局的控制，以及对一些其他组件进行捆绑，方便进行整体的处理，类似于html中的div。在实际代码开发上会大量使用视图容器，以体现对整个程序的架构、模块的理解和控制。视图容器本身并无预设的功能逻辑（我这里是指如button、input等），但通过它的样式设置（如class）、属性（如hover）、事件响应（如bindtap）等进行组合可以模拟很多其他的组件效果。这点在我读过的另一本书 深入理解Bootstrap 中提到了。

view

最基本的视图，就如同在整个页面画格子一样，利用 view 将页面划分成一个个小格子，网格化后再填充所需的功能组件。

嵌入子view

view可以内嵌入另一个view作为子view，相当于对view进一步分割。

<view>
  <view>名称:{
  
  {item.title}}</view>
</view>

横向布局

view的子view默认布局为纵向布局，而我们有时需要使用横向布局等其他布局方式。

以下操作为官方示例代码的布局方式。

在wxss文件中，声明布局方式为flex。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

.flex-wrp {display: flex;}

在wx