uni-app点击按钮弹出提示框(以弹窗的形式显示),选择确定和取消

学习目标:

学习目标如下所示:

  • uni-app点击提交按钮后弹出提示框,(以弹窗的形式显示),提示用户是否确认提交(即确定和取消),点击确定后调用真正的提交方法,将数据传给后端,点击取消后,模态框自动消失,不请求后端接口。

学习内容:

内容如下所示:

  1. 显示用户需要确认的模态框
    点击提交按钮,弹窗的显示

  2. 调用的方法

    submit(){
    let that=this
    uni.showModal({
    title: '提示:',
    content: '请确认是否要提交?',
    success: function(res) {
    if (res.confirm) {
    // console.log('确定');
    //TODO
    } else if (res.cancel) {
    // console.log('取消');
    //TODO
    }
    }
    });
    },

总结:

知识小结:

  • 模态框的主要内容

    uni.showModal({
    title: '提示',
    content: '请确认是否要提交?',
    success: function (res) {
    if (res.confirm) {
    console.log('用户点击确定');
    } else if (res.cancel) {
    console.log('用户点击取消');
    }
    }
    });

  • 2、注意:
    uni.showModal方法的提示框大小是固定的,无法通过设置字体大小来改变提示框中的文字大小。如果我们想要控制文字大小,可以通过CSS样式的方式来实现。 即通过 font-size: 16px; 控制字体的大小。

  • 3、示例效果如下所示:

相关推荐
问商十三载8 小时前
2026大模型GEO优化体系:3层链路提收录,零成本提34%引用率附工具包
大数据·前端·人工智能
IT_陈寒8 小时前
Redis过期key的坑,差点让线上服务崩了
前端·人工智能·后端
恋猫de小郭8 小时前
AI 又又造词,Graph 就又要替代 Loop 了?
前端·人工智能·ai编程
Dontla9 小时前
Canonical URL介绍(规范网址 / 规范链接)(Canonical Tag 规范标签)HTML标签、SEO优化
前端·html·seo
晓得迷路了9 小时前
栗子前端技术周刊第 138 期 - NestJS 12、Astro 7.1、npm 12...
前端·javascript·nestjs
学习-学习9 小时前
前端打包后白屏不报错:从 source-map、MIME、路由 base 到 chunk 加载失败的全链路排查
前端
霸道流氓气质9 小时前
摄像头视频预览实现教程:从原理到落地(ZLMediaKit+ flv.js+ Spring Boot)
javascript·spring boot·音视频
三8449 小时前
笔记:在同一个物理服务器上通过nginx的虚拟主机生成多个不同的web站点
java·前端·nginx
double_eggm9 小时前
uniapp.3
开发语言·前端·javascript
索西引擎9 小时前
【React】状态提升模式:设计原理、权衡分析与架构决策框架
前端·react.js·架构