五.微信小程序 基础组件

微信小程序 基础组件

一.基础组件

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

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

二.属性类型

类型	描述	注解
Boolean	布尔值	组件写上该属性, 不管该属性等于什么, 其值都为true, 只有组件上没有写该属性时, 属性值才为false. 如果属性值为变量, 变量的值会被转化为Boolean类型.
Number	数字	1, 1.2
String	字符串	"string"
Array	数组	[ 1, "string" ]
object	对象	{ key: value }
EventHandler	事件处理函数名	"handlerName"是Page中定义的事件处理函数
Any	任意属性

三.共同属性类型

所有组件都有的属性:

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面的唯一
class	String	组件的样式类	在对应的wxss中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时, 会发送给事件处理函数
bind*/catch*	EventHandler	组件的事件

四.组件列表

基础组件分为以下八大类:

1. 视图容器( View Container):

组件名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	可滑动的视图容器

2. 基础内容(Basic Content):

组件名	说明
icon	图标
text	文字
progress	进度条

3. 表单(Form):

标签名	说明
button	按钮
form	表单
input	输入框
checkbox	多项选择器
radio	单项选择器
picker	列表选择器
picker-view	内嵌列表选择器
slider	滑动选择器
switch	开关选择器
label	标签

4. 导航(Navigation):

组件名	说明
navigator	应用内跳转

5. 多媒体(Media):

组件名	说明
audio	音频
image	图片
video	视频

6. 地图(Map):

组件名	说明
map	地图

7. 画布(Canvas):

组件名	说明
canvas	画布

8. 客服会话:

组件名	说明
contact-button	进入客服会话按钮