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

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

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

展示效果图

button组件的常用属性

size：default、mini—-deZNDliMYofault为块级按钮、mini为小按钮

type：primary、default、warn—-phttp://rimary提交成功、default默认灰色、warn警告色

plain：true、false—-按钮是否镂空，背景色透明

disabled：true、false—-是否禁用

loading：true、false—-名称前是否带 loading 图标

WXML

default

primary

warn

点击设置按钮disabled属性true

点击设置按钮plain属性

点击设置按钮loading属性

WXSS

.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

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', 'primary', '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下载

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