1.wxml
<button class="btn_yzm" catchtap="getYzm" disabled="{{yzmDisabled}}"><text>{{yzm}}</text></button>
2.wxss
实现button内多行文字垂直居中
.btn_yzm {
font-size: 24rpx;
color: #EB602E;
border: 2rpx solid #EB602E;
background-color: #fff;
border-radius: 20rpx;
padding: 0px;
height:80rpx;
width: 100%;
line-height: 30rpx;//缩小行间距
display: table;
}
.btn_yzm text {
vertical-align:middle;
display: table-cell;
}
3.js
实现短信倒计时
Page({
/**
* 需要指定换行的地方\n(不加不影响垂直居中)
*/
data: {
yzm: '获取短信\n验证码',
yzmDisabled: false,
},
getYzm: function () {
var self = this;
self.changeYzm();
},
changeYzm: function () {
var self = this;
var n = 10;
self.setData({
//禁用button
yzmDisabled: true,
yzm: n,
})
var yzmInterval = setInterval(function () {
if (self.data.yzm <= 0) {
self.setData({
yzm: '获取短信\n验证码',
yzmDisabled: false,
})
clearInterval(yzmInterval);
} else {
n = n - 1;
self.setData({
yzm: n,
})
}
}, 1000)
}
