微信小程序中的常见弹框

显示加载中的提示框

• wx.showLoading()
• 当我们正在在进行网络请求时，常常就需要这个提示框

• 手动调用wx.hideLoading()方法才能够关闭这个提示框，通常在数据请求完毕时就应该关闭
• 如果一个页面中同时有多个请求，必须要等请求都完毕时才能关闭这个提示框
  • 通常我们可以设置一个变量axiosTimes=0，在每次请求数据时将这个变量加一，请求完毕时再减一，通过判断这个变量是否为0再来决定是否关闭这个提示框

// 同步发送异步代码的次数
let axiosTimes = 0
export const request = (params) => {
  axiosTimes++
  // 显示加载中效果
  wx.showLoading({
    title: ‘加载中‘,//标题名
    mask: true //遮蔽层
  })
  const baseUrl = ‘https://api-hmugo-web.itheima.net/api/public/v1‘
  
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data.message)
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        axiosTimes--
        if (axiosTimes === 0) {
          wx.hideLoading()
        }
      }
    })
  })
}

• showLoading常用属性：

显示消息提示框

• wx.showToast()

• 为了让用户在操作后得到及时的反馈，通常需要这个提示框

• showToast常见属性：

• showToast默认最大只能显示7个汉字长度，但是当属性icon设置为‘none‘时，最大可以显示两行文字

wx.showToast({
  title: ‘成功‘,
  icon: ‘success‘,
  duration: 2000
})

显示模态对话框

• wx.showModal()

• 在用户在完成某个操作时，为防止是误触，就可以弹出这个对话框让用于做一个二次确认。或者在用户做二选一时，也可以弹出这个对话框

• showModal常见属性：

• 当用户点击了确定后，这个回调结果的confirm属性就为true，点击了取消，这个回调结果的cancel就为true。因此就可以根据用户点击选项的不同来进行对应的操作

wx.showModal({
  title: ‘提示‘,
  content: ‘这是一个模态弹窗‘,
  success (res) {
    if (res.confirm) {
      console.log(‘用户点击确定‘)
    } else if (res.cancel) {
      console.log(‘用户点击取消‘)
    }
  }
})

微信小程序中的常见弹框

原文：https://www.cnblogs.com/jincanyu/p/14349229.html