微信小程序知识点总结--组件

一、部分常用组件

1、scroll-view可滚动视图区域：

　　<scroll-view>标签必须设置scroll-x/scroll-y属性，否则不能实现滚动效果

css设置：<scroll-view>标签可以设置white-space:nowrap，子元素设置display:inline-block（如子元素中有文字需要换行，则可以给子元素设置white-space:normal）;

2、image图片（支持 JPG、PNG、SVG、WEBP、GIF 等格式）

　　lazy-load：懒加载（默认false）

show-menu-by-longpress：开启长按图片显示识别小程序码菜单（默认false）

　<image>标签需要设置宽高(image标签有默认宽高320*240)和mode属性（mode的缩放模式是针对image标签自己，所以image标签需要设置宽高）

　　常用mode属性：

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

3、button按钮

size 的合法值

值	说明	最低版本
default	默认大小
mini	小尺寸

open-type：

值	说明	最低版本
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

disabled不可用性(默认false)

4、checkbox：多选

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	1.0.0

5、picker（从底部弹起的滚动选择器）：

mode 的合法值

6、navigator(页面链接)

属性	类型	默认值	必填	说明	最低版本
target	string	self	否	在哪个目标上发生跳转，默认当前小程序	2.0.7
url	string		否	当前小程序内的跳转链接	1.0.0
open-type	string	navigate	否	跳转方式	1.0.0
delta	number	1	否	当 open-type 为 'navigateBack' 时有效，表示回退的层数	1.0.0
app-id	string		否	当`target="miniProgram"`时有效，要打开的小程序 appId	2.0.7
path	string		否	当`target="miniProgram"`时有效，打开的页面路径，如果为空则打开首页	2.0.7
extra-data	object		否	当`target="miniProgram"`时有效，需要传递给目标小程序的数据，目标小程序可在 `App.onLaunch()`，`App.onShow()` 中获取到这份数据。详情	2.0.7
version	string	release	否	当`target="miniProgram"`时有效，要打开的小程序版本	2.0.7
hover-class	string	navigator-hover	否	指定点击时的样式类，当`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	600	否	手指松开后点击态保留时间，单位毫秒	1.0.0
bindsuccess	string		否	当`target="miniProgram"`时有效，跳转小程序成功	2.0.7
bindfail	string		否	当`target="miniProgram"`时有效，跳转小程序失败	2.0.7
bindcomplete	string		否	当`target="miniProgram"`时有效，跳转小程序完成	2.0.7

open-type 的合法值

值	说明	最低版本
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能	1.1.0
navigateBack	对应 wx.navigateBack 的功能	1.1.0
exit	退出小程序，`target="miniProgram"`时生效	2.1.0

轮播图组件，一般需要给swiper设置高度，swiper-item设置宽高100%;image设置宽高，如需图片直接有缝隙，则可以给swiper-item设置padding

从底部弹起的滚动选择器。