版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
在实际工作中,会遇到按钮点击前后样式不一致的情况,以验证码获取为例;
1.按钮点击前的样式
2.点击后的样式
具体代码如下所示
1.xml代码部分如下
<button formType='submit' disabled='{{disabled}}' class="submit_btn" hover-class="button-hover" >提交注册</button>
2.css代码部分如下
.submit_btn{
width: 670rpx;
height: 90rpx;
color: #ffffff;
font-size: 38rpx;
line-height: 90rpx;
border-radius:54rpx;
text-align: center;
margin-top: 50rpx;
background-color: #2EA7E0;
}
//去除按钮的默认边框
.submit_btn::after{
border:none;
}
/* 按钮被按下去的颜色 */
.button-hover{
background-color: #96d3ef;
}
/* 按钮disabled的样式 */
button[disabled], wx-button[disabled]:not([type]) {
color: #2EA7E0;
border: none;
background-color: #ededed;
}
3.js代码部分如下
// 多次点击提交按钮的设置
resetLogin: function () {
wx.hideLoading();
this.setData({
disabled: "",//按钮禁用
});
},
var countdown = 60;
var settimeOut;
var settime = function (that) {
if (countdown == 0) {
that.setData({
vText: "重新获取",
vCodeDisabled: ""
})
countdown = 60;
return;
} else {
that.setData({
vText: countdown + "s"
})
countdown--;
}
settimeOut = setTimeout(function () {
settime(that)
}, 1000)
}
button[disabled]用来修改属性为disabled的按钮样式