javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 小程序展示弹窗API

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

作者:林有酒

弹窗对我们大家来说应该都不陌生,这篇文章主要给大家介绍了关于小程序展示弹窗常见API的相关资料,主要包括showToast, showModal,showLoading和showActionSheet,需要的朋友可以参考下

展示弹窗常见的API

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

showToast

显式消息提示框

有如下一些属性:

属性类型默认值 必填说明
titlestring 提示的内容
iconstringsuccess图标
imagestring 自定义图标的本地路径,image 的优先级高于 icon
durationnumber1500提示的内容展示的时机
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> 按钮的文字数组,数组长度最大为 6
itemColorstring#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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文