显示加载中的提示框

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

image-20210124153507838

  • 手动调用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常用属性：
属性 类型 默认值 必填 说明
title string 是 提示的内容
mask boolean false 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

显示消息提示框

  • wx.showToast()

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

image-20210130141649703

  • showToast常见属性：
属性 类型 默认值 必填 说明
title string 是 提示的内容
icon string \’success\’ 否 图标
image string 否 自定义图标的本地路径，image 的优先级高于 icon
duration number 1500 否 提示的延迟时间
mask boolean false 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
  • showToast默认最大只能显示7个汉字长度，但是当属性icon设置为\’none\’时，最大可以显示两行文字
wx.showToast({
  title: \'成功\',
  icon: \'success\',
  duration: 2000
})

显示模态对话框

  • wx.showModal()

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

image-20210130142929493

  • showModal常见属性：
属性 类型 默认值 必填 说明
title string 否 提示的标题
content string 否 提示的内容
showCancel boolean true 否 是否显示取消按钮
cancelText string \’取消\’ 否 取消按钮的文字，最多 4 个字符
cancelColor string #000000 否 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText string \’确定\’ 否 确认按钮的文字，最多 4 个字符
confirmColor string #576B95 否 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
  • 当用户点击了确定后，这个回调结果的confirm属性就为true，点击了取消，这个回调结果的cancel就为true。因此就可以根据用户点击选项的不同来进行对应的操作
wx.showModal({
  title: \'提示\',
  content: \'这是一个模态弹窗\',
  success (res) {
    if (res.confirm) {
      console.log(\'用户点击确定\')
    } else if (res.cancel) {
      console.log(\'用户点击取消\')
    }
  }
})

版权声明：本文为jincanyu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jincanyu/p/14349229.html