微信小程序学习Course 5 view组件、input组件、button组件

微信小程序学习Course 5 view组件、input组件、button组件

微信小程序学习Course 5 视图组件、input组件、button组件

 

5.1 view组件

 

 

 

 

5.2 input组件

此组件具有以下属性

出处：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

 

属性名	类型	默认值	说明	最低版本
value	String		输入框的初始内容
type	String	"text"	input 的类型   text文本、number数字、idcard身份证类型、digit带小数的数字键盘
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符；当还没有输入数据时显示的文字
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	Boolean	false	获取焦点
confirm-type	String	"done"	设置键盘右下角按钮的文字，仅在type='text'时生效	1.1.0
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	1.1.0
cursor	Number		指定focus时的光标位置	1.5.0
selection-start	Number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用	1.9.0
selection-end	Number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用	1.9.0
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	1.9.90
bindinput	EventHandle		键盘输入时触发，event.detail = {value, cursor, keyCode}，value为输入的值；keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

重要组件已经用黑色标注

 

5.3 button组件

 bindTap点击事件。

出处：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

属性名	类型	默认值	说明	生效时机	最低版本
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String		用于 <form/> 组件，点击分别会触发 <form/>组件的 submit/reset 事件
open-type	String		微信开放能力		1.1.0
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态		1.5.0
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
lang	String	en	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	open-type="getUserInfo"	1.3.0
bindgetuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致	open-type="getUserInfo"	1.3.0
session-from	String		会话来源	open-type="contact"	1.4.0
send-message-title	String	当前标题	会话内消息卡片标题	open-type="contact"	1.5.0
send-message-path	String	当前分享路径	会话内消息卡片点击跳转小程序路径	open-type="contact"	1.5.0
send-message-img	String	截图	会话内消息卡片图片	open-type="contact"	1.5.0
show-message-card	Boolean	false	显示会话内消息卡片	open-type="contact"	1.5.0
bindcontact	Handler		客服消息回调	open-type="contact"	1.5.0
bindgetphonenumber	Handler		获取用户手机号回调	open-type="getPhoneNumber"	1.2.0
app-parameter	String		打开 APP 时，向 APP 传递的参数	open-type="launchApp"	1.9.5
binderror	Handler		当使用开放能力时，发生错误的回调	open-type="launchApp"	1.9.5
bindopensetting	Handler		在打开授权设置页后回调	open-type="openSetting"	2.0.7

posted @ 2018-09-15 10:49 #Cloud 阅读( ...) 评论( ...) 编辑 收藏