• 下载
  • 社区

button 按钮

按钮。

扫码体验

qrcode for button

效果示例

1.png

示例代码

<!-- API-DEMO page/component/button/button.axml -->
<view class="page">
  <view class="page-description">按钮</view>
  <view class="page-section">
    <view class="page-section-title">type-primary/ghost</view>
    <view class="page-section-demo">
      <button type="primary">主要操作 Normal</button>
      <button type="primary" loading>操作</button>
      <button type="primary" disabled>主要操作 Disable</button>
      <button type="ghost">ghost操作</button>
      <button type="ghost" loading>ghost操作</button>
      <button type="ghost" disabled>ghost操作 Disable</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">type-default</view>
    <view class="page-section-demo">
      <button data-aspm-click="xxx">辅助操作 Normal</button>
      <button disabled>辅助操作 Disable</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">type-warn</view>
    <view class="page-section-demo">
      <button type="warn">警告类操作 Normal</button>
      <button type="warn" disabled>警告类操作 Disable</button>
      <button type="warn" hover-class="red">hover-red</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">Size</view>
    <view class="page-section-demo">
      <button size="mini" loading>提交</button>
      <button style="margin-left: 10px;" type="primary" size="mini">选项</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">open</view>
    <view class="page-section-demo">
      <button open-type="share">share</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">Form</view>
    <view class="page-section-demo">
      <form onSubmit="onSubmit" onReset="onReset">
        <button form-type="submit" type="primary">submit</button>
        <button form-type="reset">reset</button>
      </form>
    </view>
  </view>
</view>
// API-DEMO page/component/button/button.js
Page({
  data: {},
  onSubmit() {
    my.alert({ title: 'You click submit' });
  },
  onReset() {
    my.alert({ title: 'You click reset' });
  },
});
/* API-DEMO page/component/button/button.acss */
.red {
  background-color: red;
  border-color: red;
  color: #fff;
}

button + button {
  margin-top: 32rpx;
}

属性

属性 类型 默认值 描述 最低版本
size String default 有效值 default, mini(小尺寸)。 -
type String default 按钮的样式类型,有效值 primary,default,,warn。 -
plain Boolean false 是否镂空 -
disabled Boolean false 是否禁用 -
loading Boolean false 按钮文字前是否带 loading 图标。 -
hover-class String button-hover 按钮按下去的样式类。button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},hover-class="none" 时表示没有被点击效果。 -
hover-start-time Number 20 按住后多少时间后出现点击状态,单位毫秒。 -
hover-stay-time Number 70 手指松开后点击状态保留时间,单位毫秒。 -
hover-stop-propagation Boolean false 是否阻止当前元素的祖先元素出现被点击样式。 1.10.0
form-type String - 有效值:submit, reset,用于 form 表单 组件,点击分别会触发 submit/reset 事件。 -
open-type String - 开放能力 1.1.0
scope String - 当 open-type 为 getAuthorize 时有效。 1.11.0
onTap EventHandle - 点击 -
app-parameter String - 打开 APP 时,向 APP 传递的参数,open-type="launchApp" 时有效。 -
public-id String - 生活号 id,必须是当前小程序同主体且已关联的生活号,open-type="lifestyle" 时有效。 -

open-type 有效值

说明 最低版本
share 触发 自定义分享,可使用 my.canIUse('button.open-type.share') 判断 1.1.0
getAuthorize 支持小程序授权,可使用 my.canIUse('button.open-type.getAuthorize') 判断 1.11.0
contactShare 分享到通讯录好友,可使用 my.canIUse('button.open-type.contactShare') 判断 1.11.0
lifestyle 关注生活号,可使用 my.canIUse('button.open-type.lifestyle') 判断 1.11.0

scope 有效值

当 open-type 为 getAuthorize 时,可以设置 scope 为以下值:

说明 最低版本
phoneNumber 唤起授权界面,用户可以授权小程序获取用户手机号。 1.11.0
userInfo 唤起授权界面,用户可以授权小程序获取支付宝会员的基础信息。 1.11.0

常见问题

使用 button 点击授权获取手机号,服务端要怎么解密?

请参见文档 内容加密接入指引