uniapp uni.showmodal如何使用 请问uniapp uni.showmodal怎么实现弹窗功能

“在uniapp中，如何使用uni.showmodal实现一个带确定和取消按钮的弹窗？我想在用户点击按钮时弹出提示框，并根据用户选择执行不同的操作，求具体代码示例和使用方法说明。”

2 回复

使用uni.showModal实现弹窗：

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

参数包括标题、内容、确认/取消按钮文字等。


uni.showModal 是 UniApp 中用于显示模态弹窗的 API，常用于确认操作、提示信息等场景。以下是基本使用方法：

语法：

uni.showModal({
  title: '标题',
  content: '内容',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

参数说明：

  • title：弹窗标题（可选）
  • content：弹窗内容
  • success：点击按钮后的回调函数
  • 其他可选参数：showCancel（是否显示取消按钮）、cancelText/confirmText（按钮文字）等

示例代码：

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

注意事项：

  1. 在 success 回调中通过 res.confirm 和 res.cancel 判断用户操作
  2. 支持异步调用（可用 async/await 封装）
  3. 在 H5 端会自动适配浏览器原生弹窗样式

如需更复杂弹窗（如自定义按钮、输入框等），建议使用 uni-popup 组件库。

回到顶部