uniapp 询问框的使用方法

在uniapp中如何使用询问框？需要引入什么组件或API吗？能否提供一个简单的代码示例？

2 回复

在uni-app中，使用uni.showModal创建询问框：

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

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


在 UniApp 中，询问框（确认对话框）主要通过 uni.showModal 方法实现。它用于向用户显示一个包含标题、内容和操作按钮的弹窗，常用于确认操作或提示信息。

基本语法

uni.showModal({
  title: '标题', // 可选，默认为"提示"
  content: '内容', // 可选，默认为空
  showCancel: true, // 可选，是否显示取消按钮，默认为 true
  cancelText: '取消', // 可选，取消按钮文字，默认为"取消"
  confirmText: '确定', // 可选，确认按钮文字，默认为"确定"
  success: (res) => { // 回调函数
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});

示例代码

// 在方法中调用
deleteItem() {
  uni.showModal({
    title: '确认删除',
    content: '删除后无法恢复，确定继续吗？',
    success: (res) => {
      if (res.confirm) {
        // 用户点击确定，执行删除操作
        console.log('执行删除');
        // 这里添加你的删除逻辑
      }
    }
  });
}

参数说明

  • title：弹窗标题（字符串）。
  • content：弹窗内容（字符串）。
  • showCancel：是否显示取消按钮（布尔值）。
  • cancelText/ confirmText：自定义按钮文字。
  • success：回调函数，通过 res.confirm 或 res.cancel 判断用户选择。

注意事项

  1. 适用于需要用户确认的操作（如删除、提交）。
  2. 可通过 showCancel: false 创建仅“确定”按钮的提示框。
  3. 支持异步回调，确保在用户响应后执行后续逻辑。

如果需要更简单的提示（无取消选项），可使用 uni.showToast，但 showModal 更适合交互性操作。

回到顶部