当前位置 : 主页 > 手机教程 > 手机资讯 >

小程序展示弹窗常见API实例详解

来源:互联网 收集:自由互联 发布时间:2023-01-25
目录 展示弹窗常见的API showToast showModal showLoading showActionSheet 总结 展示弹窗常见的API 小程序中展示弹窗有四种方式: showToast 、 showModal 、 showLoading 、 showActionSheet showToast 显式消息提示框
目录
  • 展示弹窗常见的API
    • showToast
    • showModal
    • showLoading
    • showActionSheet
  • 总结 

    展示弹窗常见的API

    小程序中展示弹窗有四种方式: showToastshowModalshowLoadingshowActionSheet

    showToast

    显式消息提示框

    有如下一些属性:

    属性类型默认值 必填说明titlestring 是提示的内容iconstringsuccess否图标imagestring 否自定义图标的本地路径,image 的优先级高于 icondurationnumber1500否提示的内容展示的时机maskbooleanfalse否是否显示透明蒙层,防止触摸穿透successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

    其中icon属性有如下一些值:

    合法值说明success显示成功图标,此时 title 文本最多显示 7 个汉字长度error显示失败图标,此时 title 文本最多显示 7 个汉字长度loading显示加载图标,此时 title 文本最多显示 7 个汉字长度none不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持

    演示代码

    wx.showToast({
      title: "购买失败",
      icon: "error",
      duration: 100,
      mask: true,
      success: (res) => {
        console.log("展示成功: ", res);
      },
      fail: (err) => {
        console.log("展示失败: ", err);
      }
    })
    

    showModal

    显示模态对话框

    常见属性如下:

    属性类型默认值必填说明titlestring 否提示的标题contentstring 否提示的内容showCancelbooleantrue否是否显示取消按钮cancelTextstring取消否取消按钮的文字,最多 4 个字符cancelColorstring#000000否取消按钮的文字颜色,必须是 16 进制格式的颜色字符串confirmTextstring确定否确认按钮的文字,最多 4 个字符confirmColorstring#576B95否确认按钮的文字颜色,必须是 16 进制格式的颜色字符串editablebooleanfalse否是否显示输入框placeholderTextstring 否显示输入框时的提示文本successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

    演示代码

    wx.showModal({
      title: "四个二",
      cancelText: "要不起",
      cancelColor: '#f00',
      confirmText: "管上",
      confirmColor: "skyblue",
      success: (res) => {
        console.log("展示成功: ", res);
      },
      fail: (err) => {
        console.log("展示失败: ", err);
      }
    })
    

    在成功的回调函数中, 有如下属性判断用户点击了确定还是取消

    属性类型说明contentstringeditable 为 true 时,用户输入的文本confirmboolean为 true 时,表示用户点击了确定按钮cancelboolean为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)
    wx.showModal({
      title: "四个二",
      cancelText: "取消",
      confirmText: "确定",
      success: (res) => {
        console.log("展示成功: ", res);
        if (res.cancel) {
          console.log("用户点击了左边取消按钮");
        } else if (res.confirm) {
          console.log("用户点击了右边确定按钮");
        }
      },
      fail: (err) => {
        console.log("展示失败: ", err);
      }
    })
    

    showLoading

    显示 loading 提示框。与showToast的区别是, 守卫Loading需主动调用 wx.hideLoading 才能关闭提示框

    其中的属性如下:

    属性类型默认值必填说明titlestring 是提示的内容maskbooleanfalse否是否显示透明蒙层,防止触摸穿透successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

    演示代码

    wx.showLoading({
    			title: '加载中',
    			mask: true,
    			success: (res) => {
    				console.log(res);
    			},
    			fail: (err) => {
    				console.log(err);
    			}
    		})
    

    showActionSheet

    显示操作菜单

    属性类型默认值必填说明alertTextstring 否警示文案itemListArray.<string> 是按钮的文字数组,数组长度最大为 6itemColorstring#000000否按钮的文字颜色successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

    演示代码

    wx.showActionSheet({
      itemList: ["Macbook", "iPad", "iPhone"],
      itemColor: "#f00",
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      }
    })
    

    成功的回调res中的属性

    属性类型说明tapIndexnumber用户点击的按钮序号,从上到下的顺序,从0开始

    可以通过tapIndex知道点击了哪个按钮

    wx.showActionSheet({
      itemList: ["Macbook", "iPad", "iPhone"],
      itemColor: "#f00",
      success: (res) => {
        console.log(res .tapIndex);
      },
      fail: (err) => {
        console.log(err);
      }
    })
    

    注意

    wx.showToastwx.showLoading同时只能显示一个

    wx.showLoadingwx.hideLoading配对使用

    总结 

    到此这篇关于小程序展示弹窗常见API的文章就介绍到这了,更多相关小程序展示弹窗API内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联!

    上一篇:基于JavaScript实现一个月饼音乐播放器
    下一篇:没有了
    网友评论