微信小程序 button内多行文字垂直居中、短信倒计时

来源:互联网 发布:淘宝装修日记哪里去了 编辑:程序博客网 时间:2024/06/03 11:30

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)  }
原创粉丝点击