微信小程序Button组件详解及简单实例

微信小程序 Button

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于网站设计、成都网站制作、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现实例效果图：

微信小程序 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;
}






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组件详解及简单实例
本文URL：http://cqcxhl.com/article/pipoge.html

重庆分公司，新征程启航

微信小程序Button组件详解及简单实例

其他资讯