微信小程序按鈕組件button,微信小程序按鈕實例

2017-12-22

導(dǎo)讀：button 按鈕。屬性名類型默認值說明最低版本 size String default 按鈕的大小 type String default 按鈕的樣式類型 plain Boolean false 按鈕是否鏤空，背景色透明 disabled Boolean false 是否禁用 loadi...

button

按鈕。

屬性名	類型	默認值	說明	最低版本
size	String	default	按鈕的大小
type	String	default	按鈕的樣式類型
plain	Boolean	false	按鈕是否鏤空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名稱前是否帶 loading 圖標(biāo)
form-type	String		用于 `<form/>` 組件，點擊分別會觸發(fā) `<form/>` 組件的 submit/reset 事件
open-type	String		微信開放能力	1.1.0
hover-class	String	button-hover	指定按鈕按下去的樣式類。當(dāng) `hover-class="none"` 時，沒有點擊態(tài)效果
hover-start-time	Number	20	按住后多久出現(xiàn)點擊態(tài)，單位毫秒
hover-stay-time	Number	70	手指松開后點擊態(tài)保留時間，單位毫秒
session-from	String		open-type="contact"時有效：用戶從該按鈕進入會話時，開發(fā)者將收到帶上本參數(shù)的事件推送。本參數(shù)可用于區(qū)分用戶進入客服會話的來源。	1.4.0
bindgetuserinfoHandler	Handler		open-type="getUserInfo"時有效：用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數(shù)的detail中獲取到的值同wx.getUserInfo	1.3.0

注：button-hover默認為{background-color:rgba(0,0,0,0.1);opacity:0.7;}

size 有效值：

值	說明
default
mini

type 有效值：

值	說明
primary
default
warn

form-type 有效值：

值	說明
submit	提交表單
reset	重置表單

open-type 有效值：

值	說明	最低版本
contact	打開客服會話	1.1.0
share	觸發(fā)用戶轉(zhuǎn)發(fā)，使用前建議先閱讀使用指引	1.2.0
getUserInfo	獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信	1.3.0

示例代碼：

/** wxss **/
/** 修改button默認的點擊態(tài)樣式類**/
.button-hover {
  background-color: red;
}
/** 添加自定義button點擊態(tài)樣式類**/
.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">點擊設(shè)置以上按鈕disabled屬性</button>
<button bindtap="setPlain">點擊設(shè)置以上按鈕plain屬性</button>
<button bindtap="setLoading">點擊設(shè)置以上按鈕loading屬性</button>
<button open-type="contact">進入客服會話</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)

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個小商店