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、示例效果如下所示:

相关推荐
丹宇码农15 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
2501_9437823515 小时前
【共创季稿事节】猜数字游戏:二分法思维与交互式反馈
前端·游戏·microsoft·harmonyos·鸿蒙·鸿蒙系统
GV191rLvq15 小时前
基于Socket实现的最简单的Web服务器【ASP.NET原理分析】
服务器·前端·asp.net
吠品15 小时前
LangChain 里 tool_call_id 为空?一次 MCP 工具集成的排查记录
前端
微信开发api-视频号协议16 小时前
企业微信二次开发中的文件系统设计:媒体资源、临时文件与业务附件
前端·微信·企业微信·媒体·ipad·微信开放平台
柒和远方16 小时前
Phase 7.4 学习博客:为什么多 API 项目需要 Swagger / OpenAPI
前端·后端·架构
张龙68716 小时前
拼多多开放平台对接踩坑实录:从 CLIENT_ID 配置到 MD5 签名算法的完整填坑指南
前端
GuWenyue16 小时前
提示词彻底过时?一套上下文工程方案,3步让LLM落地生产,代码直接复用
前端·javascript·人工智能
柒和远方16 小时前
Phase 7.3 复盘:后台任务不只是“扔进队列”,还要能被看见
前端·后端·架构