电商小程序开发_微信商城小程序制作平台

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

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

浏览量：780 时间：2019-12-23 来源：大叔的味道

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)  }