button 按钮

解释： 按钮

属性说明

属性名类型默认值必填说明最低支持版本
sizeStringdefault否大小-
typeStringdefault否类型-
plainBooleanfalse否按钮是否镂空，背景色透明。-
form-typeStringbuttonclick否用于<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否手指松开后点击态保留时间，单位毫秒。-
disabledBooleanfalse否是否禁用-
loadingBooleanfalse否名称前是否带有loading图标-
bindgetphonenumberHandler否获取用户手机号回调。和 open-type 搭配使用， 使用时机：open-type="getPhoneNumber"。具体申请方法请见：获取用户手机号权限申请。1.12.14低版本请做兼容性处理
bindgetuserinfoEventHandler否用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值，和 swan.getUserInfo 一样的。和 open-type 搭配使用， 使用时机： open-type="getUserInfo"。-
bindopensettingHandler否在打开授权设置页后回调，使用时机：open-type="openSetting"。-
bindcontactHandler否客服消息回调，使用时机：open-type="contact"。如果需要使用该功能，请发送邮件至 smartprogram_support@baidu.com 咨询详细情况。-
bindchooseAddressEventHandler否用户点击该按钮时，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，从返回参数的 detail 中获取，和 swan.chooseAddress 一样的。和 open-type 搭配使用， 使用时机： open-type="chooseAddress"。3.160.3低版本请做兼容性处理
bindchooseInvoiceTitleEventHandler否用户点击该按钮时，选择用户的发票抬头，和 swan.chooseInvoiceTitle 一样的。和 open-type 搭配使用， 使用时机： open-type="chooseInvoiceTitle"。3.160.3低版本请做兼容性处理
contactHandler否打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息。-

size有效值

值说明
default默认大小
mini小尺寸

type有效值

值说明
primary蓝色
default白色
warn红色

form-type有效值

值说明
buttonclick普通按钮点击
submit提交表单
reset重置表单

open-type有效值

值说明
share触发用户分享，使用前建议先阅读 swan.onShareAppMessage 用。
getUserInfo获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息，参考用户数据的签名验证和加解密对用户数据进行处理。
getPhoneNumber获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息：detail.errMsg 值为"getPhoneNumber:ok" 时代表用户信息获取成功；detail.errMsg 值为"getPhoneNumber:fail auth deny"时代表用户信息获取失败。参考用户数据的签名验证和加解密对用户数据进行处理获得用户手机号。用户手机号信息解密后数据示例：{"mobile":"15000000000"}1. 非个人开发者可申请；2. 审核通过后，进入小程序首页,在左侧导航栏单击“设置>开发设置”。下拉页面，在“获取用户手机号权限申请”中单击“申请开通”。
openSetting打开授权设置页
chooseAddress获取用户信息，可以从 bindchooseAddress 回调中获取到用户选择的地址信息
chooseInvoiceTitle获取用户信息，可以从 bindchooseInvoiceTitle 回调中获取到用户选择发票抬头信息
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息。

示例

在开发者工具中预览效果

扫码体验

button 按钮 - 图1请使用百度APP扫码

代码示例 1 ：不同大小按钮

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             size='mini'
  5.         </view>
  6.         <button type="primary" size="mini">
  7.             按钮
  8.         </button>
  9.     </view>
  11.     <view class="card-area">
  12.         <view class="top-description border-bottom">
  13.             size='default'
  14.         </view>
  15.         <button type="primary" size='default'>
  16.             按钮
  17.         </button>
  18.     </view>
  19. </view>

代码示例 2 ： 不同颜色按钮

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             type='primary'
  5.         </view>
  6.         <button type="primary">
  7.             非禁用态
  8.         </button>
  9.         <button type="primary" disabled>
  10.             禁用态
  11.         </button>
  12.     </view>
  13.     <view class="card-area">
  14.         <view class="top-description border-bottom">
  15.             type='default'
  16.         </view>
  17.         <button type="default">
  18.             非禁用态
  19.         </button>
  20.         <button type="default"  disabled>
  21.             禁用态
  22.         </button>
  23.     </view>
  24.     <view class="card-area">
  25.         <view class="top-description border-bottom">
  26.             type='warn'
  27.         </view>
  28.         <button type="warn">
  29.             非禁用态
  30.         </button>
  31.         <button type="warn"  disabled>
  32.             禁用态
  33.         </button>
  34.     </view>
  35. </view>

代码示例 3： 不同类型按钮

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             form-type='submit/reset'
  5.         </view>
  6.         <form bindsubmit="submit" bindreset="reset">
  7.             <button form-type="submit" type="primary" size='mini'>
  8.                 提交
  9.             </button>
  10.             <button form-type="reset" size='mini'>
  11.                 重置
  12.             </button>
  13.         </form>
  14.     </view>
  15.     <view class="card-area">
  16.         <view class="top-description border-bottom">
  17.             form-type='buttonclick'
  18.         </view>
  19.         <form>
  20.             <button form-type="buttonclick" bindtap="buttonclick" type="primary" size='default'>
  21.                 普通点击
  22.             </button>
  23.         </form>
  24.     </view>
  25. </view>

代码示例 4：不同功能按钮

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             open-type='share'
  5.         </view>
  6.         <button open-type='share' type="primary">
  7.             share
  8.         </button>
  9.     </view>
  10.     <view class="card-area">
  11.          <view class="top-description border-bottom">
  12.             open-type='getUserInfo'
  13.         </view>
  14.         <button open-type='getUserInfo' type="primary" bindgetuserinfo="getUserInfo">
  15.             getUserInfo
  16.         </button>
  17.     </view>
  18.     <view class="card-area">
  19.          <view class="top-description border-bottom">
  20.             open-type='getPhoneNumber'
  21.         </view>
  22.         <button open-type='getPhoneNumber' type="primary" bindgetphonenumber="getphonenumber">
  23.             getPhoneNumber
  24.         </button>
  25.     </view>
  26.     <view class="card-area">
  27.          <view class="top-description border-bottom">
  28.             open-type='openSetting'
  29.         </view>
  30.         <button open-type='openSetting' type="primary" bindopensetting="openSetting">
  31.             openSetting
  32.         </button>
  33.     </view>
  34.     <view class="card-area">
  35.          <view class="top-description border-bottom">
  36.             open-type='contact'
  37.         </view>
  38.         <button open-type='contact' type="primary" bindcontact="contact">
  39.             contact
  40.         </button>
  41.     </view>
  42.     <view class="card-area">
  43.          <view class="top-description border-bottom">
  44.             open-type='chooseInvoiceTitle'
  45.         </view>
  46.         <button open-type='chooseInvoiceTitle' type="primary" bindchooseInvoiceTitle="chooseInvoiceTitle">
  47.             chooseInvoiceTitle
  48.         </button>
  49.     </view>
  50.     <view class="card-area">
  51.          <view class="top-description border-bottom">
  52.             open-type='chooseAddress'
  53.         </view>
  54.         <button open-type='chooseAddress' type="primary" bindchooseAddress="chooseAddress">
  55.             chooseAddress
  56.         </button>
  57.     </view>
  58. </view>
Page({
    getphonenumber(e) {
        console.log(e)
    },
    getUserInfo(e){
        console.log(e)
    },
    opensetting(e) {
        console.log(e)
    },
    contact(e) {
        console.log(e)
    },
    chooseInvoiceTitle(e) {
        console.log(e)
    },
    chooseAddress(e) {
        console.log(e)
    }        }
});

代码示例 5：hover-stop-propagation属性

在开发者工具中预览效果

<view class="wrap">
    <view class="card-area" hover-class="hover">
        <button type="primary" hover-stop-propagation='true'>
            按钮
        </button>
    </view>
</view>

.hover {
    opacity: .2;
}
.card-area {
    background-color: #5B9FFF;
}