微信小程序showModal与showLoading配合使用_微信小程序showloading

一、演示视频

二、实现逻辑

1.wx.showModal

功能：显示模态对话框

2.wx.showLoading

功能：显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

点击“发布”button控件时，调用showModal。在成功的回调中，开启一个加载效果

的loading。设置一个定时器用于关闭该定时器，可以定时器函数内编写代码实现

想要的功能。

三、实现代码

wx.showModal({
              title: '支付确认',
              content: '确认下单并支付吗？',
              complete: (res) => {
                if (res.cancel) {
                  wx.showToast({
                    title: '取消支付',
                    icon:'error'
                  })
                }
                if (res.confirm) {
                  wx.showLoading({
                    title: '3s后支付成功',
                  })
                setTimeout(function(){
                    db.collection('order')
                .where({
                  orderId: orderId //订单号
                })
                .update({
                  data: {
                    statu: '已支付'
                  }
                }).then(res => {
                  return res
                }).catch(res => {
                  return res
                })
                // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
              wx.switchTab({
                url: '../index/index',
              })
              wx.showToast({
                title: '发布成功',
              })
              wx.hideLoading()
                },3000)
                }
              }
            })

 代码解析：

complete

function

接口调用结束的回调函数（调用成功、失败都会执行）

在complete中分别实现“对话框”用户点击“取消”按钮和“确认”按钮的执行代码。在成功的回调(res.confirm)中开启加载效果。

四、官网地址：界面 / 交互 / wx.showModal (qq.com)

总结：在需要实现加载效果和对话框的场景中，都可以配合这两个API，从而实现简单效果。