van-dialog的stopLoading()方法无效

问题现象:

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给开启了

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值