微信小プログラムbutton内の複数行の文字が垂直に中央に位置し、メールのカウントダウン
4803 ワード
1.wxml
2.wxss button内の複数行文字の垂直中央を実現
3.jsメールカウントダウンを実現
<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({
/**
*
( )
*/
data: {
yzm: '
',
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: '
',
yzmDisabled: false,
})
clearInterval(yzmInterval);
} else {
n = n - 1;
self.setData({
yzm: n,
})
}
}, 1000)
}