wxml
<button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button>
js
data:{
disabled: false,
code: '获取验证码',
},
goGetCode:function(){
var that = this;
var time = 60;
that.setData({
code: '60秒后重发',
disabled: true
})
var Interval = setInterval(function() {
time--;
if (time>0){
that.setData({
code: time + '秒后重发'
})
}else{
clearInterval(Interval);
that.setData({
code: '获取验证码',
disabled: false
})
}
},1000)
}
wxss
button{
width:260rpx;
height:80rpx;
padding: 10rpx 0;
color: #000;
line-height: 50rpx;
font-size: 32rpx;
color: #fff;
background: green;
}
button[disabled]:not([type]){
background: red;
color: #fff;
}
微信小程序验证码获取倒计时
wxml
<button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button>
js
data:{
disabled: false,
code: '获取验证码',
},
goGetCode:function(){
var that = this;
var time = 60;
that.setData({
code: '60秒后重发',
disabled: true
})
var Interval = setInterval(function() {
time--;
if (time>0){
that.setData({
code: time + '秒后重发'
})
}else{
clearInterval(Interval);
that.setData({
code: '获取验证码',
disabled: false
})
}
},1000)
}
wxss
button{
width:260rpx;
height:80rpx;
padding: 10rpx 0;
color: #000;
line-height: 50rpx;
font-size: 32rpx;
color: #fff;
background: green;
}
button[disabled]:not([type]){
background: red;
color: #fff;
}
微信小程序用setData修改数组或对象中的一个属性值
主看部分wxml
<button wx:if="{{item.btn}}" class="group-btn" disabled='{{disabled}}' bindtap="getVerificationCode">{{item.btn}}</button>
全部
<view class="pos-row">
<input wx:if="{{item.type=='input'}}" class="{{item.key== 'identify'?'special': 'input'}}" placeholder="{{item.placeholder}}" data-index="{{index}}" data-key="{{item.key}}" bindinput="changeInfo" />
<button wx:if="{{item.btn}}" class="group-btn" disabled='{{disabled}}' bindtap="getVerificationCode">{{item.btn}}</button>
<textarea wx:if="{{item.type=='textarea'}}" placeholder="{{item.placeholder}}" data-key="{{item.key}}" bindinput="changeText"/>
</view>
需求验证获取倒计时
点击获取验证码变成倒计时
解决方法
1、先用一个变量把（list[2].btn）用字符串拼接起来
-
2、将变量写在[]里面即可
var btn = "list[" + 2 + "].btn"
that.setData({
[btn]: '60秒后重发',
})
js
Page({
data:{
list:[
{
type: 'input',
star: '*',
name: '您的姓名',
placeholder: '请输入您的真实姓名'
},
{
type: 'input',
star: '*',
name: '联系方式',
placeholder: '请输入您的手机号码'
},
{
type: 'input',
star: '*',
name: '验证码',
btn: '获取验证码',//倒计时
placeholder: '请输入验证码'
},
{
type: 'input',
name: '您的地址',
placeholder: '请输入您的地址'
},
{
type: 'textarea',
name: '您的爱好',
placeholder: '请输入您的爱好'
},
{
type: 'input',
name: '您的年龄',
placeholder: '请输入您的年龄'
},
{
type: 'textarea',
name: '留言备注',
placeholder: '请输入您的留言信息'
}
],
disabled: false
},
getCode: function () {
var that = this;
var time = 60;
var btn = "list[" + 2 + "].btn"
that.setData({
[btn]: '60秒后重发',
disabled: true
})
var interval = setInterval(function () {
time--;
if(time>0){
that.setData({
[btn]: time+'秒后重发'
});
}else{
clearInterval(interval);
that.setData({
[btn]: '获取验证码',
disabled: false
});
}
}, 1000)
},
getVerificationCode() {
var that = this
that.getCode();
}
})
wxss
.star {
display: inline-block;
width: 10px;
height: 100%;
padding-right: 10rpx;
font-size: 34rpx;
color: #c21227;
}
.pos-row {
position: relative;
display: inline-block;
width: 70%;
}
.input,textarea {
width: 95%;
height: 66rpx;
border: 1px solid #000;
border-radius: 8rpx;
padding-left: 20rpx;
box-sizing: borde-box;
font-size: 28rpx;
resize: none;
}
.special {
width: 60%;
height: 66rpx;
border: 1px solid #000;
border-radius: 8rpx;
padding-left: 20rpx;
margin-right: 10rpx;
box-sizing: borde-box;
font-size: 28rpx;
resize: none;
/* text-overflow:clip;
overflow:hidden;
white-space:nowrap; */
}
textarea {
width: 100%;
height: 100rpx;
padding: 16rpx 20rpx;
box-sizing: border-box;
}
.group-btn {
position: absolute;
top: 0;
right: 0;
z-index: 11;
width: 50%;
height: 35px;
background: #f56730;
color: #fff;
font-size: 28rpx;
margin:0;
}
.group-btn[disabled]:not([type]){
background: #f56730;
color: #fff;
}
.from-btn {
position: absolute;
bottom: 0;
width: 100%;
height: 70rpx;
box-sizing: border-box;
padding: 20px 40rpx 0;
}