微信小程序之视图容器篇 - 01 View

1、view

view 是一个视图容器，主要用于页面的布局展示，一个最基本的组件。容器，说明它可以接受其他组件的嵌入，包括多个view的嵌套。view 与 HTML5 中 <div> 标签的功能相似。

建议结合相关的 WXSS 一起使用，才能展现更美观的效果。

view 的常见属性如下：

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

【实战案例 – 简单布局】

<view>
   <view>
     <!-- 设置同一行展示 -->
     <view style='font-size:26px; color:orange;'>同一行展示</view>
     <view style="display:flex; flex-direction:row;">
       <view style="background-color:#00FF7F; width:100px; height:100px; color:#ffffff; text-align:center">JavaEE</view>
       <view style="background-color:#FF4500; width:100px; height:100px; color:#ffffff; text-align:center">微信小程序</view>
       <view style="background-color:#00BFFF; width:100px; height:100px; color:#ffffff; text-align:center">网络营销</view>
     </view>
   </view>
   <view>
     <!-- 设置同一列展示 -->
     <view style='font-size:26px; color:orange;'>同一列展示</view>
     <view style="display:flex; height: 300px; flex-direction:column;">
       <view style="background-color:#00FF7F; width:100px; height:100px; color:#ffffff; text-align:center">人工智能</view>
       <view style="background-color:#FF4500; width:100px; height:100px; color:#ffffff; text-align:center">前端</view>
      <view style="background-color:#00BFFF; width:100px; height:100px; color:#ffffff; text-align:center">Python</view>
     </view>
   </view>
</view>

运行效果：

图2-1 view 组件的使用