Skip to main content





const types = ['default', 'primary', 'warn']const pageObject = {  data: {    defaultSize: 'default',    primarySize: 'default',    warnSize: 'default',    disabled: false,    plain: false,    loading: false  },
  onShareAppMessage() {    return {      title: 'button',      path: 'page/component/pages/button/button'    }  },
  setDisabled() {    this.setData({      disabled: !     })   },
   setPlain() {     this.setData({       plain: !     })   },
   setLoading() {     this.setData({       loading: !     })   },
   handleContact(e) {     console.log(e.detail)   },
   handleGetPhoneNumber(e) {     console.log(e.detail)   },
   handleGetUserInfo(e) {     console.log(e.detail)   },
   handleOpenSetting(e) {     console.log(e.detail.authSetting)   },
   handleGetUserInfo(e) {     console.log(e.detail.userInfo)   } }
 for (let i = 0; i < types.length; ++i) {   (function (type) {     pageObject[type] = function () {       const key = type + 'Size'       const changedData = {}       changedData[key] =[key] === 'default' ? 'mini' : 'default'       this.setData(changedData)     }   }(types[i])) }


<view class="page-body"> <view class="btn-area" id="buttonContainer">   <button type="primary">Page Main Normal</button>   <button type="primary" loading="true">Page Main Loading</button>   <button type="primary" disabled="true">Page Main Disabled</button>
   <button type="default">Page Second Normal</button>   <button type="default" disabled="true">Page Second Disabled</button>
   <button type="warn">Warn Normal</button>   <button type="warn" disabled="true">Warn Disabled</button>
   <view class="button-sp-area">     <button type="primary" plain="true">Button</button>     <button type="primary" disabled="true" plain="true">Disable Button</button>
     <button type="default" plain="true"></button>     <button type="default" disabled="true" plain="true">Button</button>
     <button class="mini-btn" type="primary" size="mini">Button</button>     <button class="mini-btn" type="default" size="mini">Button</button>     <button class="mini-btn" type="warn" size="mini">Button</button>   </view> </view></view>


button{   margin-top: 30rpx;   margin-bottom: 30rpx; } .button-sp-area{   margin: 0 auto;   width: 60%; } .mini-btn{   margin-right: 10rpx; }

Bug & Tip

  • tip: button-hover Default is{background-color: rgba(0, 0, 0, 0.1) opacity: 0.7}
  • tip: Currently set form-type of button Object in the current component form Effective. Thus, will button Is encapsulated in a custom component, and form In addition to the custom component, the button of form-type Failure.


sizestringButton size
typestringStyle type of on"default"
plainbooleanWhether the on is hollow, the background color is transparentfalse
disabledbooleanIs it disabled?false
loadingbooleanDoes the name come with loading iconfalse
hover-classstringSpecifies the style class for which the on is pressed. when hover-class="none" There is no click state effect"button-hover"
hover-stop-propagationbooleanSpecifies whether to prevent this node's ancestor from clickingfalse
hover-start-timenumberHow long does it take to click, in milliseconds?20
hover-stay-timenumberClick hold time after finger release, in milliseconds70
form-typeFormTypeUsed for form Component, click separately to trigger form Component submit/reset event
open-typeOpenTypeMini Program open ability 


bindtapThe tap event handler of the button
bindtapcaptureTrigger when button tap event capture phase, see more about DOM3-EVENTS
bindtouchstartThe start event When touch the button
bindopensettingCallback after opening the authorization settings page, open type = openSetting
bindgetuserprofileWhen the user clicks the on, the user information will be returned, open-type."getuserprofile" is valid
bindgetphonenumberGets the user's phone number callback, valid when open-type = getPhoneNumber
bindgetemailaddressGets the user's email address callback