问题现象:
vant版本1.11.4
在van-dialog组件使用时,使用了async-close异步关闭,在点击确认按钮触发confirm的回调时,
确认按钮一直处于loading状态
<van-dialog
show="{{ showDialog }}"
title="请输入验证码"
use-slot
async-close
showCancelButton
bind:cancel="dialogCancel"
bind:confirm="dialogConfirm">
<view style="padding: 40rpx 0;">
<van-field type="number" label="手机号" value="{{phone}}" bind:input="inputChange" data-key="phone" />
<van-field type="number" label="验证码" value="{{phoneVerifyCode}}" bind:input="inputChange" data-key="phoneVerifyCode">
<van-button slot="button" size="small" plain disabled="{{countDown}}" bindtap="getCheckCode">获取验证码</epd-button>
</van-field>
</view>
</van-dialog>
在confirm回调中主动调用stopLoading方法取消确认按钮的loading
dialogConfirm(e) {
// 停止加载状态
const dialog = e.detail.dialog
dialog.stopLoading()
}
这样调用会有问题
在源码里
页面的confirm回调函数同步执行完后,又把loading开启了,所以可以把回调函数里的stopLoading方法调用的时机延后,使用wx.nextTick()
data: {
loading: {
confirm: false,
cancel: false,
},
callback: (function () { }),
},
methods: {
onConfirm: function () {
this.handleAction('confirm');
},
onCancel: function () {
this.handleAction('cancel');
},
stopLoading: function () {
// confirm回调函数执行到这
this.setData({
loading: {
confirm: false,
cancel: false,
},
});
},
// 先调用这个
handleAction: function (action) {
var _a;
var _this = this;
// 进入了页面的confirm回调函数
this.$emit(action, { dialog: this });
// confirm回调函数执行完成
var _b = this.data, asyncClose = _b.asyncClose, beforeClose = _b.beforeClose;
if (!asyncClose && !beforeClose) {
this.close(action);
return;
}
// 这里又把loading开启了
this.setData((_a = {},
_a["loading.".concat(action)] = true,
_a));
if (beforeClose) {
(0, utils_1.toPromise)(beforeClose(action)).then(function (value) {
if (value) {
_this.close(action);
}
else {
_this.stopLoading();
}
});
}
},
},
改为
dialogConfirm(e) {
// 停止加载状态
const dialog = e.detail.dialog
// 在当前同步流程结束后,下一个时间片执行
wx.nextTick(() => {
dialog.stopLoading()
})
}
微信小程序开放文档里有这个,所以handleAction里$emit的事件的回调执行好像就变成同步执行的,执行完之后才会往下走,所以后面的操作又把loading给开启了
标签:function,loading,van,confirm,dialog,stopLoading,action From: https://blog.csdn.net/weixin_45785694/article/details/140104082