溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“微信小程序按鈕組件button怎么使用”，在日常操作中，相信很多人在微信小程序按鈕組件button怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序按鈕組件button怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
按鈕。
| 屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
|---|---|---|---|---|
| size | String | default | 按鈕的大小 | |
| type | String | default | 按鈕的樣式類型 | |
| plain | Boolean | false | 按鈕是否鏤空，背景色透明 | |
| disabled | Boolean | false | 是否禁用 | |
| loading | Boolean | false | 名稱前是否帶 loading 圖標 | |
| form-type | String |
用于 <form/> 組件，點擊分別會觸發 <form/> 組件的 submit/reset 事件 | ||
| open-type | String | 微信開放能力 | 1.1.0 | |
| hover-class | String | button-hover |
指定按鈕按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果 | |
| hover-start-time | Number | 20 | 按住后多久出現點擊態，單位毫秒 | |
| hover-stay-time | Number | 70 | 手指松開后點擊態保留時間，單位毫秒 | |
| session-from | String | open-type="contact"時有效：用戶從該按鈕進入會話時，開發者將收到帶上本參數的事件推送。本參數可用于區分用戶進入客服會話的來源。 | 1.4.0 | |
bindgetuserinfoHandler | Handler | open-type="getUserInfo"時有效：用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的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 | 觸發用戶轉發，使用前建議先閱讀使用指引 | 1.2.0 |
| getUserInfo | 獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信 | 1.3.0 |
示例代碼：
/** wxss **//** 修改button默認的點擊態樣式類**/.button-hover { background-color: red;
}/** 添加自定義button點擊態樣式類**/.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">點擊設置以上按鈕disabled屬性</button><button bindtap="setPlain">點擊設置以上按鈕plain屬性</button><button bindtap="setLoading">點擊設置以上按鈕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)到此，關于“微信小程序按鈕組件button怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
