小程序组件概述及视图容器

小程序的组件

什么是组件：

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格一致的样式。
• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

<tagname property="value">
Content goes here ...
</tagname>

注意：所有组件与属性都是小写，以连字符-连接

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考组件文档。

• 视图容器
• 基础内容
• 表单组件
• 导航
• 媒体组件
• 地图
• 画布

视图容器

视图容器就是将页面分割为独立的，不同的部分。视图容器共包含：

名称 	功能说明
movable-view 	可移动的视图容器，在页面中可以拖拽滑动
cover-image 	覆盖在原生组件之上的图片视图
cover-view 	覆盖在原生组件之上的文本视图
movable-area 	movable-view的可移动区域
scroll-view 	可滚动视图区域
swiper 	滑块视图容器
swiper-item 	仅可放置在swiper组件中，宽高自动设置为100%
view 	视图容器

view（视图容器）属性说明

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

Bug & Tip

tip: 如果需要使用滚动视图，请使用 scroll-view

例：index2.html:

<view hover-class="h-class">点击</view>

index.css:

/* pages/index2/index2.wxss */
.h-class{
  background-color:yellow;
}

hover-stop-propagation 的用途：

例：index2.html:

<view hover-class="h-class">

   父点击
   <view hover-class="h-class" hover-stop-propagation="false">子点击</view>

</view>

视图容器的嵌套

示例代码 例： index2.wxml:

<!--pages/test/test.wxml-->
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp1">
    <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>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp2" >
    <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>
</view>

index2.css:

.section{
  margin-bottom: 20rpx;
}
.flex-wrp1 {display: flex;flex-direction:row;}
.flex-wrp2 {display: flex;height: 300px;flex-direction:column;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

更多更详细的内容请参考微信官方文档