• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序中的常见弹框

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

显示加载中的提示框

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

显示消息提示框

  • wx.showToast()

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

  • 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()

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

  • 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(\'用户点击取消\')
    }
  }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之自定义底部弹出框动画发布时间:2022-07-18
下一篇:
微信小程序常用的3种提示弹窗发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap