button

解释: 按钮

属性名类型默认值说明
sizeStringdefault大小
typeStringdefault类型
plainBooleanfalse按钮是否镂空,背景色透明。
form-typeString-用于<form/>组件,点击分别会触发<form/>组件的 submit/reset 事件。
open-typeString-百度 App开放能力,比如分享、获取用户信息等等。
hover-classStringbutton-hover点击态。指定按钮按下去的样式类。当 hover-class=”none” 时,没有点击态效果。 button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态。
hover-start-timeNumber20按住后多久出现点击态,单位毫秒。
hover-stay-timeNumber70手指松开后点击态保留时间,单位毫秒。
bindgetuserinfoHandler-用户点击该按钮时,会返回获取到的用户信息,从返回参数的 detail 中获取到的值,和 swan.getUserInfo 一样的。和 open-type 搭配使用, 使用时机: open-type=”getUserInfo”。
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带有loading图标
bindgetphonenumberHandler-获取用户手机号回调。和 open-type 搭配使用, 使用时机: open-type=”getPhoneNumber”。具体申请方法请见:获取用户手机号权限申请
bindopensettingHandler-在打开授权设置页后回调,使用时机:open-type="openSetting"


size有效值:

说明
default默认大小
mini小尺寸

type有效值:

说明
primary蓝色
default白色
warn红色

open-type有效值:

说明
contact打开客服会话。
share触发用户分享,使用前建议先阅读 swan.onShareAppMessage 用。
getUserInfo获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息,参考用户数据的签名验证和加解密对用户数据进行处理。
getPhoneNumber获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,参考用户数据的签名验证和加解密对用户数据进行处理。1. 非个人开发者可申请;2. 审核通过后,进入小程序首页,在左侧导航栏单击“设置>开发设置”。下拉页面,在“获取用户手机号权限申请”中单击“申请开通”。
openSetting打开授权设置页

示例在开发者工具中预览效果

  1. /** button.css **/
    /** 修改 button 点击态样式**/
    .button-hover {
    background-color: green;
    }
    /** 添加自定义 button 点击态样式类**/
    .other-button-hover {
    background-color: blue;
    }

  1. <!-- button.swan-->
    <button type="default" size="mini" disabled="true" hover-class="other-button-hover">我是 button </button>