uniapp showModal如何使用？

在uniapp中使用showModal时，如何设置标题、内容和按钮文字？点击不同按钮后如何获取用户的响应？能否自定义弹窗的样式或添加图标？

2 回复

uni.showModal 用于显示模态弹窗。示例：

uni.showModal({
  title: '提示',
  content: '确定删除吗？',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

常用参数：title、content、showCancel、success回调。


在 UniApp 中，uni.showModal 是一个用于显示模态对话框的 API，常用于确认操作、提示信息或用户选择。它基于微信小程序的 wx.showModal，并兼容多端（如 H5、App、微信小程序等）。

基本语法

uni.showModal({
  title: '标题',        // 对话框标题（可选）
  content: '内容',      // 对话框内容（可选）
  showCancel: true,     // 是否显示取消按钮（默认 true）
  cancelText: '取消',   // 取消按钮文本（默认 "取消"）
  cancelColor: '#000000', // 取消按钮颜色（默认 "#000000"）
  confirmText: '确定',   // 确认按钮文本（默认 "确定"）
  confirmColor: '#007AFF', // 确认按钮颜色（默认 "#007AFF"）
  editable: false,      // 是否显示输入框（H5 和 App 支持，默认 false）
  placeholderText: '请输入内容', // 输入框占位符（editable 为 true 时有效）
  success: (res) => {   // 用户点击按钮后的回调
    if (res.confirm) {
      console.log('用户点击确定');
      // 可获取输入框内容：res.content（editable 为 true 时）
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  },
  fail: (err) => {      // 调用失败回调（可选）
    console.error(err);
  }
});

参数说明

  • title：对话框标题，字符串类型，可选。
  • content：对话框内容，字符串类型，可选。
  • showCancel：是否显示取消按钮，布尔类型，默认为 true。
  • cancelText/confirmText：自定义按钮文本。
  • cancelColor/confirmColor：按钮颜色，支持 HEX 格式（如 #FF0000）。
  • editable：是否显示输入框（仅 H5 和 App 端支持），布尔类型。
  • placeholderText：输入框占位符文本（当 editable 为 true 时有效）。
  • success：成功回调函数，返回对象包含：
    • confirm：用户点击确认时为 true。
    • cancel：用户点击取消时为 true。
    • content：输入框内容（仅当 editable 为 true 时返回）。

使用示例

  1. 基础确认对话框：

    uni.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success: (res) => {
    if (res.confirm) {
      uni.showToast({ title: '已删除', icon: 'success' });
    }
  }
});

  2. 带输入框的模态框（仅 H5/App）：

    uni.showModal({
  title: '反馈',
  editable: true,
  placeholderText: '请输入意见',
  success: (res) => {
    if (res.confirm) {
      console.log('用户输入：', res.content);
    }
  }
});

  3. 隐藏取消按钮：

    uni.showModal({
  content: '操作成功！',
  showCancel: false,
  confirmText: '我知道了'
});

注意事项

  • 平台差异：editable 参数在微信小程序中不支持，仅 H5 和 App 端有效。
  • 样式：按钮颜色和文本可根据需求自定义，但部分平台可能忽略颜色设置。
  • 异步处理：通过 success 回调处理用户操作，避免同步代码阻塞。

通过以上方法，可灵活使用 uni.showModal 实现交互提示功能。

回到顶部