文章目录

• • 展示弹窗常见的小程序展详解API
  • • showToast
    • showModal
    • showLoading
    • showActionSheet

展示弹窗常见的API

小程序中展示弹窗有四种方式: showToast、 showModal、示弹 showLoading、窗常 showActionSheet

showToast

显式消息提示框

有如下一些属性:

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

演示代码

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

showModal

显示模态对话框

常见属性如下:

演示代码

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

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

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才能关闭提示框

其中的属性如下:

演示代码

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

showActionSheet

显示操作菜单

演示代码

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

成功的回调res中的属性

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

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

注意

wx.showToast和 wx.showLoading同时只能显示一个

wx.showLoading和wx.hideLoading配对使用