前言

相比H5弹出框的实现方式要么用插件,要么自己写;微信小程序则提供了几个弹出框api,使用起来更简单、方便;每个api都有不同的使用方式、场景,今天我们就来说说小程序的几种弹出框。

目录

  • wx.showToast()
  • wx.showModal()
  • wx.showLoading()
  • wx.showActionSheet()
  • wx.hideToast()
  • wx.hideLoading()

正文

一、wx.showToast()

显示消息提示框;

wx.showToast({
    title: "成功", // 提示的内容
    icon: "success", // 图标,默认success
    image: "", // 自定义图标的本地路径,image 的优先级高于 icon
    duration: 3000, // 提示的延迟时间,默认1500
    mask: false, // 是否显示透明蒙层,防止触摸穿透
    success: function () {
        console.log("接口调用成功的回调函数");
    },
    fail: function () {
        console.log("接口调用失败的回调函数");
    },
    complete: function () {
        console.log("接口调用结束的回调函数(调用成功、失败都会执行)");
    }
})

icon的值一共3个:

  • success:显示成功图标,此时 title 文本最多显示 7 个汉字长度
  • loading:显示加载图标,此时 title 文本最多显示
  • 7 个汉字长度 none:不显示图标,此时 title 文本最多可显示多行

效果展示:
在这里插入图片描述在这里插入图片描述

二、wx.showModal()

显示模态对话框

wx.showModal({
    title: "温馨提示", // 提示的标题
    content: "提示内容提示内容提示内容提示内容", // 提示的内容
    showCancel: true, // 是否显示取消按钮,默认true
    cancelText: "取消", // 取消按钮的文字,最多4个字符
    cancelColor: "#000000", // 取消按钮的文字颜色,必须是16进制格式的颜色字符串
    confirmText: "确定", // 确认按钮的文字,最多4个字符
    confirmColor: "#576B95", // 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
    success: function (res) {
        console.log("接口调用成功的回调函数");
        if (res.confirm) {
            console.log('用户点击确定')
        } else if (res.cancel) {
            console.log('用户点击取消')
        }
    },
    fail: function () {
        console.log("接口调用失败的回调函数");
    },
    complete: function () {
        console.log("接口调用结束的回调函数(调用成功、失败都会执行)");
    }
})

success(调用成功):可以监测用户点击确定或取消按钮
– confirm:为 true 时,表示用户点击了确定按钮
– cancel:为 true 时,表示用户点击了取消

效果展示:
在这里插入图片描述

三、wx.showLoading()

显示 loading 提示框,需主动调用 wx.hideLoading 才能关闭提示框;

wx.showModal({
    title: "温馨提示", // 提示的内容
    mask: true, // 是否显示透明蒙层,防止触摸穿透
    success: function (res) {
        console.log("接口调用成功的回调函数");
    },
    fail: function () {
        console.log("接口调用失败的回调函数");
    },
    complete: function () {
        console.log("接口调用结束的回调函数(调用成功、失败都会执行)");
    }
})

温馨提示:
– 需主动调用wx.hideLoading才能关闭提示框,可设置延迟自动关闭;
– 常用于接口请求,请求时wx.showLoading,成功返回数据后wx.hideLoading,可以避免接口请求时用户多次点击。

效果展示:
在这里插入图片描述

四、wx.showActionSheet()

显示操作菜单

wx.showActionSheet({
    itemList: ["1号", "2号", "3号", "4号", "5号", "6号"], // 按钮的文字数组,长度最大为6
    itemColor: "#000000", // 按钮的文字颜色,默认#000000
    success: function (res) {
        console.log("接口调用成功的回调函数");
        // 用户点击的按钮序号,从上到下的顺序,从0开始
        console.log(res.tapIndex)
    },
    fail: function () {
        console.log("接口调用失败的回调函数");
    },
    complete: function () {
        console.log("接口调用结束的回调函数(调用成功、失败都会执行)");
    }
})

success(调用成功):可以返回用户点击的序号
– tapIndex:用户点击的按钮序号,从上到下的顺序,从0开始

效果展示:
在这里插入图片描述

五、wx.hideToast()

隐藏消息提示框

wx.hideToast();
六、wx.hideLoading()

隐藏 loading 提示框

wx.hideLoading();

总结

  • wx.showLoading 和 wx.showToast 同时只能显示一个;
  • wx.showToast应与wx.hideToast配对使用;
  • wx.showLoading应与wx.hideLoading配对使用;