微信小プログラムbutton内の複数行の文字が垂直に中央に位置し、メールのカウントダウン


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({

  /**
   *  
( ) */
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) }