微信小程序-视图容器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;}

在wxml文件中，在view的class上设置 flex-wrp ，在style上设置 flex-direction:row; ，其中 flex-item 为子item的样式，此处代码未声明，所以无效。

<view class="flex-wrp" style="flex-direction:row;">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
</view>

若是不想这么麻烦，不想写wxss文件，也可以直接在view的style上声明。

<view style='display:flex;flex-direction:row;'>
  <view>1</view>
  <view>2</view>
</view>

Flex的属性列表（我没都试过，只是按需尝试使用，此处为引用div的）：

• flex-direction 容器内元素的排列方向(默认横向排列)
  • flex-direction:row; 沿水平主轴让元素从左向右排列（默认值）
  • flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
  • flex-direction:row-reverse;沿水平主轴让元素从右向左排列
• flex-wrap 容器内元素的换行(默认不换行)
  • flex-wrap: nowrap; (默认)元素不换行
  • flex-wrap: wrap; 元素换行
• justify-content 元素在主轴（页面）上的排列
  • justify-content : center;元素在主轴（页面）上居中排列
  • justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
  • justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
  • justify-content : space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
  • justify-content : space-around;每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。
• align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
  • align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
  • align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
  • align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
  • align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）
• align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
  • align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
  • align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
  • align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
  • align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。
  • align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
  • align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’

文字

文字可以直接在view上书写(见嵌入子view示例)，也可以通过 Text 设置，方便添加样式。

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

空格

有时，我们需要在view的文字中添加上空格，以让内容更精细化的显示。需要先声明 decode="{{true}}" ，然后以   作为空格。

<view wx-if="{{item.department}}" class='font12 bray-color'>
  <text decode="{{true}}">&nbsp;| 部门:{{item.department}}</text>
</view>

条件显示

有时，需要当符合某些条件时，才对某些view进行显示。如必须有部门的值，才进行显示部门的内容。这就需要通过 wx-if 进行设置，当表达式({{item.department}})的值为true时，此view生效。

<view wx-if="{{item.department}}" class='font12 bray-color'>
  <text decode="{{true}}">&nbsp;| 部门:{{item.department}}</text>
</view>

查看示例代码

在微信的官方文档中，可以点击“在开发者工具中预览效果”进行查看示例代码，系统会自动调用微信开发者工具打开相应的示例代码。主要是这个文字不太明显，而又很有帮助所以在这里单独提一下。

https://developers.weixin.qq.com/miniprogram/dev/component/view.html