微信小程序 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) }
阅读全文
0 0
- 微信小程序 button内多行文字垂直居中、短信倒计时
- 多行文字垂直居中
- 不固定图片垂直居中、多行文字垂直居中
- 多行文字的垂直水平居中
- 多行文字的垂直居中
- css布局-多行文字垂直居中
- CSS实现多行文字垂直居中
- css布局-多行文字垂直居中
- 如何实现多行文字垂直居中
- 多行文字实现垂直居中
- 垂直居中一张图片和多行文字在固定的盒子内
- 多行文本垂直居中
- 多行文本垂直居中
- jsp页面中单行、多行文字的垂直居中
- 图片、多行文字的水平垂直居中
- lineheight使图片多行文字垂直居中
- 大小不固定,多行文字的垂直居中
- 多行文字在div实现垂直居中的方法
- mount 和 umount 命令
- java中,switch语句的陷阱
- virtualenv内安装TensorFlow
- thymeleaf标签之th:text的使用
- IOS中的UISegmentedControl控件实现多行文本
- 微信小程序 button内多行文字垂直居中、短信倒计时
- Shell实现多进程扫描IP网段
- ssh分页的实现
- 安卓自定义控件
- STM32->RCC
- Hadoop2.X Yarn框架原理及运作机制
- 关于微信支付第一次成功,后面就不成功的坑。。。。
- BZOJ4169: Lmc的游戏
- Map和Map<key,value>及Map<String, ?>的区别