您的位置:首页 > 移动开发 > 微信开发

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

2017-06-16 09:23 561 查看
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)
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息