首页 > 其他分享 >van-dialog的stopLoading()方法无效

van-dialog的stopLoading()方法无效

时间:2024-07-01 16:57:06浏览次数:18  
标签:function loading van confirm dialog stopLoading action

问题现象:

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

相关文章

  • h5 移动端align-items: center; 字体行高偏上问题;vant 按钮字体不居中问题
    最近写h5页面,用的vant,验收时候,ui说按钮的字上下不居中 是不是很难看出来有点靠上,我拿了个牙签比了一下,才觉得靠上,用电脑打开就是好的 后来加了个背景色,发现行高不一样发现下面(手机端)这个文字行高不太居中, 然后添加了属性 /deep/.van-button__content{line-heigh......
  • nirvana 如风消散
    nirvana涅槃涅槃,就是指如一堆火焰熄灭在风中,像一缕青烟消散在空中,灵魂与天地万物同在,人的生命在集体中归于寂灭,心身圆寂,重归自然,进入更大的循环,如从所来,内心平和,一切遵从上天的安排。nirvana=nir+va+na字面含义:(如焰熄灭)随风消散nirvana,通我们(we←va-风),通......
  • “Vanilla” 在计算机科学和技术领域中的专业翻译
    “Vanilla”在计算机科学和技术领域中通常指的是某个系统或软件的“原始”或“基础”版本,即没有任何修改、扩展或定制的版本。它可以翻译为“原版”或“基础版”。以下是一些具体的使用场景和示例句子:使用场景软件开发:指基础版本的软件或库,没有添加任何额外的功能或自定义代......
  • DialogPane对话框布局
    JavaFX的DialogPane是一个用于创建对话框的控件,它是Dialog类内容部分的根节点。DialogPane提供了一个灵活的方式来自定义对话框的内容和行为。以下是DialogPane的一些基本用法:构造函数:DialogPane可以通过多种构造函数创建,可以指定标题、头部、内容和扩展按钮。标......
  • 论文阅读:UniMS-RAG: Unified Multi-Source RAG for Personalised Dialogue
    UniMS-RAG:UnifiedMulti-SourceRAGforPersonalisedDialogue(https://arxiv.org/abs/2401.13256)https://github.com/jiangnanboy/paper_read_note一.概述本研究探讨如何分解RAG过程,加入多文件检索、记忆和个人信息等元素。大型语言模型(llm)在自然语言任务中表现出色,但......
  • React+TS前台项目实战(九)-- 全局常用组件弹窗Dialog封装
    文章目录前言Dialog公共弹窗组件1.功能分析2.代码+详细注释3.使用方式4.效果展示总结前言今天这篇主要讲全局公共弹窗Dialog组件封装,将用到上篇封装的模态框Modal组件。有时在前台项目中,偶尔要用到一两个常用的组件,如弹窗,其实不必非安装ant-design这些主流框......
  • AlertDialog对话框
    简介        AlertDialog是一个常用的组件,用于展示一个漂浮在当前界面之上的对话框,常用来显示警告、确认信息或简单的用户输入。通常,我们不是直接实例化AlertDialog对象,而是通过其内部类AlertDialog.Builder来构建。AlertDialog 不同于前面已经学习过的UI控件,它不......
  • PyQT5之QFontDialog
    importsysfromPyQt5.QtCoreimport*fromPyQt5.QtWidgetsimport*fromPyQt5.QtGuiimport*classFontDialogdemo(QWidget):def__init__(self,parent=None):super(FontDialogdemo,self).__init__(parent)self.resize(500,300)......
  • PyQT5之QDialog
    importsysfromPyQt5.QtCoreimport*fromPyQt5.QtGuiimport*fromPyQt5.QtWidgetsimport*classQDialogDemo(QMainWindow):def__init__(self):super().__init__()self.initUI()definitUI(self):self.setWindowTitle(�......
  • COMP643 Advanced Database Management
    COMP643AdvancedDatabaseManagementAssignment3Worth:20%ofcoursemarksforCOMP643.Due:Friday,14thJune20245:00p.m.LatePenalty:Worknotreceivedbytheduetimeattractsanimmediatepenalty,upto25%ofthepointsavailable.Noworkw......