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

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

微信小程序 Button

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现实例效果图：

属性名

类型

默认值

说明

size

String

default

有效值default, mini

type

String

default

按钮的样式类型，有效值primary, default, warn

plain

Boolean

false

按VbvqB钮是否镂空，背景色透明

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;

}

disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default

disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default

disabled="{{disabled}}" bindtap="primary"> primary

disabled="{{disabled}}" bindtap="primary"> primary

disabled="{{disabled}}" bindtap="warn"> warn

disabled="{{disabled}}" bindtap="warn"> warn

点击设置以上按钮disabled属性

点击设置以上按钮plain属性

点击设置以上按钮loading属性

var types = ['default', 'primary', 'warn']

var pageObject = {

data: {

defaultSize: 'default',

primarySize: 'default',

warnSize: 'default',

disabled: false,

plain: false,

loading: false

},

setDisabledVbvqB: 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)

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。