微信小程序开发组件篇
本内容记录时间为2021-04-06，后期语法可能会发生变动，本篇为学习组件过程中认为比较重要的知识记录
1.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] |
2.text(行标签)
| 属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
| user-select |
boolean |
false |
否 |
文本是否可选，该属性会使文本节点显示为 inline-block |
[2.12.1] |
| space |
string |
①ensp：中文字符空格一半大小 ②emsp中文字符空格大小 ③nbsp根据字体设置的空格大小 |
否 |
显示连续空格 |
[1.4.0] |
| decode |
boolean |
false |
否 |
是否解码 |
[1.4.0] |
3.image
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，也可以引入网络地址
| 属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
| src |
string |
|
否 |
图片资源地址 |
[1.0.0] |
| mode |
string |
scaleToFill |
否 |
图片裁剪、缩放的模式 |
[1.0.0] |
| show-menu-by-longpress |
boolean |
false |
否 |
开启长按图片显示识别小程序码菜单 |
[2.7.0] |
mode 的合法值
| 值 |
说明 |
| scaleToFill |
非等比缩放填充，图片会变形 |
| aspectFit |
等比缩放，长边适配，与上下图片间有空余部分 |
| aspectFill |
等比缩放，短边适配，图片显示不完整 |
| widthFix |
缩放模式，宽度不变，高度自动变化，图片原样展示 |
| heightFix |
缩放模式，高度不变，宽度自动变化，图片会不完整 |
widthFix一般来说是使用较多的图片格式，其余十几种格式一般不用
4.navigator(块元素)
调用方法：url=“页面地址”，不可以跳转到网络
打开方式：open-type 的合法值
| 值 |
说明 |
| redirect |
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。在小程序插件中使用时，只能在当前插件的页面中调用 |
| switchTab |
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，在小程序插件中使用时，只能在当前插件的页面中调用 |
| reLaunch |
关闭所有页面，打开到应用内的某个页面，在小程序插件中使用时，只能在当前插件的页面中调用 |
| navigateBack |
关闭当前页面，返回上一页面或多级页面 |
5.scroll-view（滚动条）
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。
| 类型 |
默认值 |
必填 |
属性 |
说明 |
| boolean |
false |
否 |
scroll-x |
允许横向滚动 |
| boolean |
false |
否 |
scroll-y |
允许纵向滚动 |
| number/string |
|
否 |
scroll-top |
设置竖向滚动条上端起始位置 |
| number/string |
|
否 |
scroll-left |
设置横向滚动条左端起始位置 |
| boolean |
false |
否 |
scroll-with-animation |
在设置滚动条位置时使用动画过渡 |
6.swiper（轮播图）
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| indicator-dots |
boolean |
false |
否 |
是否显示面板指示点 |
| indicator-color |
color |
rgba(0, 0, 0, .3) |
否 |
指示点颜色 |
| indicator-active-color |
color |
#000000 |
否 |
当前选中的指示点颜色 |
| autoplay |
boolean |
false |
否 |
是否自动切换 |
| interval |
number |
5000 |
否 |
自动切换时间间隔 |
| duration |
number |
500 |
否 |
滑动动画时长 |
| circular |
boolean |
false |
否 |
是否采用衔接滑动 |
| previous-margin |
string |
“0px” |
否 |
前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |
| next-margin |
string |
“0px” |
否 |
后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |
7.button
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| size |
string |
default，还可以是mini |
否 |
按钮的大小 |
| type |
string |
default，还可以是primary(绿色)，warn(红色) |
否 |
按钮的样式类型 |
| disabled |
boolean |
false |
否 |
是否禁用 |
| loading |
boolean |
false |
否 |
名称前是否带 loading 图标,加载圆环 |
| open-type |
string |
|
否 |
微信开放能力 |
8.input(输入框)
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| value |
string |
|
是 |
输入框的初始内容 |
| type |
string |
text |
否 |
input 的类型 |
| password |
boolean |
false |
否 |
是否是密码类型 |
| placeholder |
string |
|
是 |
输入框为空时占位符 |
| placeholder-style |
string |
|
是 |
指定 placeholder 的样式 |
| placeholder-class |
string |
input-placeholder |
否 |
指定 placeholder 的样式类 |
| disabled |
boolean |
false |
否 |
是否禁用 |
| auto-focus |
boolean |
false |
否 |
(即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
| cursor-spacing |
number |
0 |
否 |
指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
| confirm-type |
string |
done |
否 |
设置键盘右下角按钮的文字，仅在type='text’时生效，例如“确定”，“换行”… |
type 的合法值
| 值 |
说明 |
| text |
文本输入键盘 |
| number |
数字输入键盘 |
| idcard |
身份证输入键盘 |
| digit |
带小数点的数字键盘 |
9.switch
开关选择器。
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| checked |
boolean |
false |
否 |
是否选中 |
| disabled |
boolean |
false |
否 |
是否禁用 |
| type |
string |
switch |
否 |
样式，有效值：switch, checkbox |
| color |
string |
#04BE02 |
否 |
switch 的颜色，同 css 的 color |
| bindchange |
eventhandle |
|
否 |
checked 改变时触发 change 事件，event.detail={ value} |
10.其余组件
（1）icon
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| type |
string |
|
是 |
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| size |
number/string |
23 |
否 |
icon的大小 |
| color |
string |
|
否 |
icon的颜色，同css的color |
（2）progress
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| percent |
number |
|
否 |
百分比0~100 |
| show-info |
boolean |
false |
否 |
在进度条右侧显示百分比 |
| border-radius |
number/string |
0 |
否 |
圆角大小 |
| font-size |
number/string |
16 |
否 |
右侧百分比字体大小 |
| stroke-width |
number/string |
6 |
否 |
进度条线的宽度 |
| color |
string |
#09BB07 |
否 |
进度条颜色（请使用activeColor） |
| activeColor |
string |
#09BB07 |
否 |
已选择的进度条的颜色 |
| backgroundColor |
string |
#EBEBEB |
否 |
未选择的进度条的颜色 |
| active |
boolean |
false |
否 |
进度条从左往右的动画 |
| active-mode |
string |
backwards |
否 |
backwards: 动画从头播；forwards：动画从上次结束点接着播 |
| duration |
number |
30 |
否 |
进度增加1%所需毫秒数 |
| bindactiveend |
eventhandle |
|
否 |
动画完成事件 |