开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

今天学习了很多小程序当中会使用到的组件，做了一些总结。有的也不是很齐全，大家可以去参考官网。

视图容器

<page-container show="">遮罩层

使用方法：该组件里的show属性为true时，显示遮罩层，默认是false。

<root-portal>也是遮罩层使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

<scroll-view>

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

<page-container>弹出框

弹出框组件就相当于是个遮罩层，它要配合自身的show属性，show属性值为true，它才会显示，为false就不显示。可以配合点击事件使用。

<swiper>滚动组件

该组件就类似于swiper插件，这个组件要结合<swiper-item>一起使用。如果想让图片设置滚动的话，就把中间的文本换成<image>组件即可

<scroll-view>滚动组件

滚动组件是一定要设置高度，这个高度小于里面内容的高度，反之的话不会出效果。

<share-element>组件

这个组件要结合着遮罩层组件一起使用，外面的 <share-element>组件要与被<page-container>包裹的组件结构一致。不过目前的话我也没太懂这个组件具体怎么使用。 以上只要是会动的组件，基本都有事件函数，在这里就不给大家一一列举了，大家使用的时候可以参考官网。

基础内容

<icon>主要设置小程序的图标。

• 属性：type：小图标是什么样式，icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear。而且这个属性是必填的
• 属性：color：可以设置icon图标的颜色。
• 属性：size：设置图片大小

<progress>进度条

该组件设置很简单，有很多属性，可以参考官方文档，这里就步一一列举了。把网址给大家列在这进度条组件官网

<rich-text>富文本编辑器

富文本编辑器有两种写法，一种是直接在data中定义数据，值为字符串，字符串直接写字符串标记，或者要符合一定的结构，把我自己写的代码给大家看一下，也把官网地址给大家列在这里。

富文本组件官网

<text>文本组件

<text/>组件里只能嵌套<text/>。 除了文本节点以外，其他文本节点都无法长按选中 文本组件官网

表单组件

<button>组件

按钮组件有很多的属性，大家可以参考官网，要注意，按钮可以作为表单的提交按钮和重置表单按钮，也可以作为分享按钮，不过就是需要设置相应的属性。

• 属性：open-type：值为share的时候，就可以作为分享按钮使用。
• 属性：form-type：值为submit是表单提交，reset是表单重置按钮

<checkbox>组件

它里面可以设置value属性，value就是要选择的内容，可以结合<checkbox-group>一起使用，这样的话，给<checkbox-group>绑定bindchange事件，它里面的事件对象e.detail接收到的是选中的复选框value值组成的对象

以上就是我自己做的一些总结，都是很前线的东西，希望我的diamagnetic能对小伙伴们有所帮助！！！