微信小程序button组件使用详解

本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下

展示效果图

button组件的常用属性

• size：default、mini—-default为块级按钮、mini为小按钮
• type：primary、default、warn—-primary提交成功、default默认灰色、warn警告色
• plain：true、false—-按钮是否镂空，背景色透明
• disabled：true、false—-是否禁用
• loading：true、false—-名称前是否带 loading 图标

WXML

rush:xhtml;"> disabled" disabled="{{disabled}}" type="primary">点击设置按钮disabled属性true 属性 属性

WXSS

rush:css;"> .tui-btn-group{ padding: 10px; } .tui-btn-content{ height: 60px; line-height: 60px; } /** 修改button默认的点击态样式类**/ .button-hover { background-color: red; } /** 添加自定义button点击态样式类**/ .other-button-hover { background-color: blue; }

JS

rush:js;"> 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 }) } }

//循环给'default','warn'按钮创建函数
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);

DEMO

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。