交互

消息提示框

showToast

<button type="primary" bindtap="clickToastHandle">弹出提示框</button>

Page({
  clickToastHandle() {
    wx.showToast({
      title: "成功",
      icon: "success",
      duration: 2000,
    });
  },
});

属性	类型	默认值	必填	说明
title	string		是	提示的内容
icon	string	success	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

icon 详情

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

Page({
  onLoad(options) {},
  clickToastHandle() {
    wx.showToast({
      title: "等待数据加载",
      icon: "loading",
      duration: 2000,
      mask: true,
      image: "../../images/loading.png",
    });
  },
});

hideToast

隐藏消息提示框

Page({
  onLoad(options) {},
  clickToastHandle() {
    wx.showToast({
      title: "等待数据加载",
      icon: "loading",
      duration: 5000,
      mask: false,
      image: "../../images/loading.png",
    });
  },
  clickHideToast() {
    wx.hideToast();
  },
});

loading 提示框

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

Page({
  onLoad(options) {
    wx.showLoading({
      title: "加载中",
    });
  },
});

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

Page({
  onLoad(options) {
    wx.showLoading({
      title: "加载中",
      mask: true,
    });

    setTimeout(() => {
      wx.hideLoading();
    }, 2000);
  },
});

模态对话框

显示模态对话框，其实就是可以进行交互了

基本对话框

<button type="primary" bindtap="clickModalHandle">显示对话框</button>

Page({
  clickModalHandle() {
    wx.showModal({
      title: "提示",
      content: "这是一个模态弹窗",
      success(res) {
        if (res.confirm) {
          console.log("用户点击确定");
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  },
});

属性	类型	默认值	必填	说明
title	string		否	提示的标题
content	string		否	提示的内容
showCancel	boolean	true	否	是否显示取消按钮
cancelText	string	取消	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	确定	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
editable	boolean	false	否	是否显示输入框
placeholderText	string		否	显示输入框时的提示文本

存在输入框的对话框

<button type="primary" bindtap="clickModalHandle">显示对话框</button>

Page({
  clickModalHandle() {
    wx.showModal({
      title: "提示",
      // content: '这是一个模态弹窗',
      showCancel: true,
      cancelText: "残忍拒绝",
      cancelColor: "#ff0000",
      confirmText: "欣然接受",
      confirmColor: "#00ff00",
      editable: true,
      placeholderText: "请输入信息",
      success(res) {
        if (res.confirm) {
          // res.content获取用户输入信息
          console.log("用户点击确定", res.content);
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  },
});

操作菜单

显示操作菜单，菜单会从底部弹出

<button type="primary" bindtap="clickActionSheetHandle">显示底部菜单栏</button>

Page({
  clickActionSheetHandle() {
    wx.showActionSheet({
      itemList: ["A", "B", "C"],
      success(res) {
        console.log(res.tapIndex);
      },
      fail(res) {
        console.log(res.errMsg);
      },
    });
  },
});

属性	类型	默认值	必填	说明
itemList	Array.		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数

获取数据

Page({
  data: {
    citys: ["北京", "西安", "太原", "河北", "内蒙"],
  },
  clickActionSheetHandle() {
    var that = this;
    wx.showActionSheet({
      itemList: this.data.citys,
      itemColor: "#f00",
      success(res) {
        console.log(that.data.citys[res.tapIndex]);
      },
      fail(res) {
        console.log(res.errMsg);
      },
    });
  },
});