支付寶小程序表單組件 按鈕·Button

需要重點強調該操作并且引導用戶去點擊的入口通過按鈕表達。

掃碼體驗

示例代碼

<!-- 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;
}

屬性

open-type 有效值

scope 有效值

當 open-type 為 getAuthorize 時，可以設置 scope 為以下值：

常見問題

button 如何去除默認邊框？

設置下 class 改為：border: 0; padding: 0;

如何實現(xiàn)自定義分享中的 button: 頁面分享按鈕觸發(fā)？

通過給 button 組件設置屬性 open-type="share"，可以在用戶點擊按鈕后觸發(fā)。