这篇文章主要介绍了微信小程序 button 组件详解及简单实例的相关资料,需要的朋友可以参考下
实现实例效果图：
属性名类型默认值说明
size string default 有效值default, mini
type string default 按钮的样式类型，有效值primary, default, warn
plain boolean false 按钮是否镂空，背景色透明
disabled boolean false 是否禁用
loading boolean false 名称前是否带 loading 图标
formtype string 无 有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class string button-hover 指定按钮按下去的样式类。当hover-class=none时，没有点击态效果
注：button-hover默认为{background-color:rgba(0,0,0,0.1);opacity:0.7;}
示例代码：
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{
background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{
background-color:blur;
}
<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>
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 组件详解及简单实例。