本文为大家分享了微信小程序按钮组件的使用方法,供大家参考,具体内容如下
展示效果图
按钮组件的常用属性
<李>大小:默认情况下,迷你,默认为块级按钮,迷你为小按钮李
<李>类型:初级,默认情况下,警告,主要提交成功,默认默认灰色,警告警告色李
<李>平原:真的,假的,按钮是否镂空,背景色透明李
<李>禁用:真的,假的——是否禁用李
<李>加载:真、假——名称前是否带负荷图标
李
WXML
& lt;视图类=皌ui-btn-group”比;
& lt;视图类=皌ui-btn-content”比;
& lt;按钮大?" {{defaultSize}}”bindtap=澳稀県over-class=皁ther-button-hover”比;默认& lt;/button>
& lt;/view>
& lt;视图类=皌ui-btn-content”比;
& lt;按钮类型=爸鳌贝笮=" {{primarySize}} " bindtap=俺跫丁北?主要& lt;/button>
& lt;/view>
& lt;视图类=皌ui-btn-content”比;
& lt;按钮类型=熬妗贝笮=" {{warnSize}} " bindtap=熬妗北?警告& lt;/button>
& lt;/view>
& lt;视图类=皌ui-btn-content”比;
& lt;按钮bindtap=" setDisabled "禁用=皗{禁用}}”类型=爸鳌痹诘慊魃柚冒磁ソ檬粜詔rue
& lt;/view>
& lt;视图类=皌ui-btn-content”比;
& lt;按钮bindtap=" setPlain "纯="{{平原}}祝辞点击设置按钮平原属性& lt;/button>
& lt;/view>
& lt;视图类=皌ui-btn-content”比;
& lt;按钮bindtap=皊etLoading”=皗{加载}}”类型=熬妗钡脑诘慊魃柚冒磁ゼ釉厥粜? lt;/button>
& lt;/view>
& lt;/view>
wxs
.tui-btn-group {
填充:10 px;
}
.tui-btn-content {
高度:60 px;
行高:60 px;
}/* *修改按钮默认的点击态样式类* */.button-hover {
背景颜色:红色;
}/* *添加自定义按钮点击态样式类* */.other-button-hover {
背景颜色:蓝色;
}
JS
var类型=[‘默认’,‘主’,‘警告’)
var pageObject={
数据:{
defaultSize:“违约”,
primarySize:“违约”,
warnSize:“违约”,
禁用:假的,
纯:假的,
加载:假
},
setDisabled:函数(e) {
this.setData ({
禁用:this.data.disabled !
})
},
setPlain:函数(e) {
this.setData ({
纯:this.data.plain !
})
},
setLoading:函数(e) {
this.setData ({
加载:this.data.loading !
})
}
}//循环给‘默认’,‘主’,‘警告’按钮创建函数
(var=0;我& lt;types.length;+ + i) {
(函数(式){
pageObject[型]=函数(e) {
var关键=类型+“大小”
var changedData=https://www.yisu.com/zixun/{}
changedData[主要]=这一点。数据(关键)===稀? # 63;“迷你”:“违约”
this.setData (changedData)
}
})(类型[我])
}
页面(pageObject);
之前
演示下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
