【小程序】展示弹窗常见API详解

展示弹窗常见的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);
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

---

showModal

显示模态对话框

常见属性如下:

演示代码

wx.showModal({
  title: "四个二",
  cancelText: "要不起",
  cancelColor: '#f00',
  confirmText: "管上",
  confirmColor: "skyblue",
  success: (res) => {
    console.log("展示成功: ", res);
  },
  fail: (err) => {
    console.log("展示失败: ", err);
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

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

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);
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

showLoading

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

其中的属性如下:

演示代码

wx.showLoading({
			title: '加载中',
			mask: true,
			success: (res) => {
				console.log(res);
			},
			fail: (err) => {
				console.log(err);
			}
		})
1
2
3
4
5
6
7
8
9
10

---

showActionSheet

显示操作菜单

演示代码

wx.showActionSheet({
  itemList: ["Macbook", "iPad", "iPhone"],
  itemColor: "#f00",
  success: (res) => {
    console.log(res);
  },
  fail: (err) => {
    console.log(err);
  }
})
1
2
3
4
5
6
7
8
9
10

成功的回调res中的属性

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

wx.showActionSheet({
  itemList: ["Macbook", "iPad", "iPhone"],
  itemColor: "#f00",
  success: (res) => {
    console.log(res .tapIndex);
  },
  fail: (err) => {
    console.log(err);
  }
})
1
2
3
4
5
6
7
8
9
10

注意

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

wx.showLoading和wx.hideLoading配对使用