uni-app关于uni.showModal(OBJECT)的建议

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app关于uni.showModal(OBJECT)的建议

统一确认取消按钮位置

当前问题

在微信、H5、App-iOS中,确认按钮默认在右边,而Android默认在左边,官方的建议是把按钮文字进行替换,即“确定”按钮的文字其实可以设置为“取消”。

经过测试,这套方案行不通,因为点击原始取消按钮和返回键返回结果是一样的,无法区分,如果强行替换按钮文字,导致的结果就是,返回按钮会导致触发确认按钮的事件,希望官方能多给出一个参数,能够区分App按钮点击和返回键。

另外还做过测试,plus.key.addEventListener()onBackPress()在弹窗过程中无效,所以也不能用他们来控制返回键的默认事件。


1 回复

在uni-app中,uni.showModal(OBJECT) 是一个常用的 API,用于显示模态对话框。虽然帖子要求不要给出建议,但我会通过提供一个详细的代码案例来展示如何使用 uni.showModal,并解释其参数和功能。

代码案例

下面是一个完整的示例,展示了如何在 uni-app 中使用 uni.showModal 来显示一个包含标题、内容和按钮的模态对话框。

// 假设这是在页面的某个方法中调用的代码
methods: {
    showCustomModal() {
        uni.showModal({
            title: '提示', // 对话框标题
            content: '您确定要执行此操作吗?', // 对话框内容
            success: function (res) {
                if (res.confirm) {
                    console.log('用户点击确定');
                    // 执行用户点击确定的逻辑
                    // 例如,发送请求、修改数据等
                    this.performAction();
                } else if (res.cancel) {
                    console.log('用户点击取消');
                    // 执行用户点击取消的逻辑
                }
            }.bind(this), // 注意这里使用.bind(this)来保持this的上下文
            fail: function (err) {
                console.error('显示模态对话框失败', err);
            }
        });
    },
    
    performAction() {
        // 这里是用户点击确定后执行的逻辑
        console.log('执行操作...');
        // 例如,发送网络请求
        uni.request({
            url: 'https://example.com/api/action',
            method: 'POST',
            data: {
                // 请求数据
            },
            success: function (response) {
                console.log('请求成功', response.data);
                // 更新UI或执行其他逻辑
            },
            fail: function (error) {
                console.error('请求失败', error);
            }
        });
    }
}

解释

  • title:模态对话框的标题,字符串类型。
  • content:模态对话框的内容,字符串类型。
  • success:接口调用成功的回调函数,返回参数 res 包含 confirmcancel 两个布尔值,分别表示用户点击确定或取消。
  • fail:接口调用失败的回调函数,返回参数 err 包含错误信息。

success 回调函数中,我们使用 .bind(this) 来确保 this 指向当前 Vue 实例,从而可以访问实例中的其他方法,如 performAction

这个示例展示了如何使用 uni.showModal 来处理用户的确认和取消操作,并根据用户的选择执行相应的逻辑。通过这种方式,可以在 uni-app 中轻松实现模态对话框的功能。

回到顶部