本文共 775 字，大约阅读时间需要 2 分钟。

官方文档中仅有示例代码，但没有示例效果图，要看组件的效果 需要将示例代码运行在 开发工具中，比较麻烦，这里将运行后的组件示例代码效果 整理成GIF图，可以高效的找到需要的组件。

容器组件

1. div

概述： 基本容器

查看官方

2. list

概述：列表视图容器

查看官方

3. list-item

概述： list 的子组件，用来展示列表具体 item，宽度默认充满 list 组件

查看官方

查看官方 (组件2和3是同一个示例代码)

4. popup

概述： 在点击控件或者某个区域后，浮出一个气泡来引导用户，气泡内容通过子组件来定义。如果设置了遮罩层，可通过点击遮罩层的任意位置退出，否则点击气泡外的任意区域退出

查看官方

5. refresh

概述： 下拉刷新容器

查看官方

6. richtext

概述： 富文本容器

查看官方

7. stack

概述： 基本容器，子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件

查看官方

8. swiper

概述： 滑块视图容器

查看官方

9. tabs

概述： tab 容器

10. tab-bar

概述： tabs 的子组件，用来展示 tab 的标签区，子组件排列方式为横向排列

11. tab-content

概述： tabs 的子组件，用来展示 tab 的内容区，高度默认充满 tabs 剩余空间，子组件排列方式为横向排列

查看官方 (组件9、10、11是同一个示例代码)

转载地址：http://eamen.baihongyu.com/