1# 组件介绍<a name="ZH-CN_TOPIC_0000001063340551"></a> 2 3- [组件分类](#section154381954142018) 4 5组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。 6 7## 组件分类<a name="section154381954142018"></a> 8 9根据组件的功能，可以分为以下四大类： 10 11<a name="table1566416553433"></a> 12<table><thead align="left"><tr id="row466410559436"><th class="cellrowborder" valign="top" width="33.23%" id="mcps1.1.3.1.1"><p id="p1166485514432"><a name="p1166485514432"></a><a name="p1166485514432"></a>组件类型</p> 13</th> 14<th class="cellrowborder" valign="top" width="66.77%" id="mcps1.1.3.1.2"><p id="p146651555174320"><a name="p146651555174320"></a><a name="p146651555174320"></a>主要组件</p> 15</th> 16</tr> 17</thead> 18<tbody><tr id="row166525516430"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p116655558432"><a name="p116655558432"></a><a name="p116655558432"></a>基础组件</p> 19</td> 20<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p12145036194419"><a name="p12145036194419"></a><a name="p12145036194419"></a>text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart</p> 21</td> 22</tr> 23<tr id="row10665555154310"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p1266535584311"><a name="p1266535584311"></a><a name="p1266535584311"></a>容器组件</p> 24</td> 25<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p18127648144417"><a name="p18127648144417"></a><a name="p18127648144417"></a>div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog</p> 26</td> 27</tr> 28<tr id="row3665175512436"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p196651055164310"><a name="p196651055164310"></a><a name="p196651055164310"></a>画布组件</p> 29</td> 30<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p066545564313"><a name="p066545564313"></a><a name="p066545564313"></a>canvas</p> 31</td> 32</tr> 33</tbody> 34</table> 35 36