WeChat Open Platform

Mini Programs Documentation

button

Buttons

Attribute name Type Default value Description Minimum version
size String default Button size
type String default Button style type
plain Boolean false Whether button is hollow and background color is transparent
disabled Boolean false Whether disabled
loading Boolean false Whether there is a loading icon before the name
form-type String Used for <form/> component, tapping will trigger a submit/reset event respectively
open-type String Valid value: contact; opens Service Center session {%version('1.1.0')%}
hover-class String button-hover Specifies style type when button pressed. When hover-class="none", there are no tap status effects.
hover-start-time Number 20 How long it takes for tap status to appear after holding down, unit milliseconds
hover-stay-time Number 70 Amount of time tap status is maintained after finger is released, unit milliseconds  

Note: button-hover default is {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

size valid values:

Value Description
default
mini  

type valid values:

Value Description
primary
default
warn  

form-type valid values:

Value Description
submit Submits form
reset Resets form

open-type valid values:

Value Description Minimum version
contact Opens Service Center session  

Sample code:

/** wxss **/
/** Modifies default button tap status and style type**/
.button-hover {
  background-color: red;
}
/** Adds custom button tap status and style type**/
.other-button-hover {
  background-color: blue;
}
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">Click to set the above button's disabled attribute</button>
<button bindtap="setPlain">Click to set the above button's plain attribute</button>
<button bindtap="setLoading">Click to set the above button's loading attribute</button>
<button open-type="contact">Enter Service Center session</button>
var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  }
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

Page(pageObject)

button