【翻译一下官方文档】之uniapp的界面弹框交互

news2024/12/24 0:03:14

大致分 3 种

  • 普通提示
  • loading框
  • 弹出选项

我个人理解就是大致知道有些什么,有啥功能,用到的时候,直接去用,不会的回来翻看文档

uni.showToast(OBJECT)

参数类型必填说明平台差异说明
titleString提示的内容,长度与 icon 取值有关。
iconString图标,有效值详见下方说明,默认:success。
imageString自定义图标的本地路径(app端暂不支持gif)App、H5、微信小程序、百度小程序、字节小程序(2.62.0+)
maskBoolean是否显示透明蒙层,防止触摸穿透,默认:falseApp、微信小程序、字节小程序(2.47.0+)
durationNumber提示的延迟时间,单位毫秒,默认:1500
positionString纯文本轻提示显示位置,填写有效值后只有 title 属性生效,且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。App
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

 uni.hideToast()

隐藏消息提示框。

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

 

参数类型必填说明平台差异说明
titleString提示的文字内容,显示在loading的下方
maskBoolean是否显示透明蒙层,防止触摸穿透,默认:falseH5、App、微信小程序、百度小程序、字节小程序(2.47.0+)
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

uni.hideLoading()

隐藏 loading 提示框。


uni.showLoading({
	title: '加载中'
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

uni.showModal(OBJECT)

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

参数类型必填说明平台差异说明
titleString提示的标题
contentString提示的内容
showCancelBoolean是否显示取消按钮,默认为 true
cancelTextString取消按钮的文字,默认为"取消"
cancelColorHexColor取消按钮的文字颜色,默认为"#000000"H5、微信小程序、百度小程序、字节小程序(2.62.0+)
confirmTextString确定按钮的文字,默认为"确定"
confirmColorHexColor确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#576B95",百度小程序平台默认为"#3c76ff"H5、微信小程序、百度小程序、字节小程序(2.62.0+)
editableBoolean是否显示输入框H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、字节小程序(2.62.0+)
placeholderTextString显示输入框时的提示文本H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、字节小程序(2.62.0+)
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

 uni.showActionSheet(OBJECT)

注意

  • 弹框同时使用确定取消时,需注意不同平台的确认取消按钮位置不同。在微信、H5中,确认按钮默认在右边。在App中,iOS的确认按钮默认在右边,而Android默认在左边。产生这种差异的原因是uni.showModal在App和小程序上调用的是原生提供的弹出框,原生平台的策略本身就不同。如果需要调整,可以通过自行控制按钮的文字,即“确定”按钮的文字其实可以设置为“取消”;
  • showModal不满足需求时,可以自行开发组件弹框。插件市场有很多自定义弹框的组件,需注意在非H5平台,前端组件无法覆盖原生组件(如地图、video),遮罩也无法盖住tabbar和navigationbar。如需覆盖原生组件或遮罩tabbar等,App端推荐使用subNvue
  • 小程序平台,cancelTextconfirmText有长度限制,最多允许 4 个字符;
  • 钉钉小程序真机与模拟器表现有差异,真机title,content均为必填项
  • 各家小程序平台对于 confirmcancel 字段返回规则可能不尽相同,包含两种情况:{ confirm: true, cancel: false }{ confirm: true },但并不影响使用 if 去做判断

翻译一下:就是说这个玩意在 h5 、小程序等不同平台会有差异,用的时候注意

uni.showActionSheet(OBJECT)

从底部向上弹出操作菜单

 

Tips

  • App平台,iPad设备支持设置弹出框的位置,详见 plus.nativeUI的文档

App平台,实现原生的、复杂的底部图文菜单,例如分享菜单,可参考底部图标菜单 imagemenu - DCloud 插件市场

注意

  • 在非H5端,本章的所有弹出控件都是原生控件,层级最高,可覆盖video、map、tabbar等原生控件。
  • uni-app插件市场

有很多封装好的前端组件,但注意前端组件层级不是最高,无法覆盖原生组件,除非使用cover-view或nvue。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/454540.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 多态详解

目录 多态的概念 定义 C直接支持多态条件 举例 回顾继承中遇到的问题 虚函数-虚函数指针-虚函数列表 虚函数 虚函数指针 虚函数列表 虚函数调用流程 虚函数于普通成员函数的区别 多态的概念 定义 多态:相同的行为方式导致了不同的行为结果,同一行…

【翻译一下官方文档】之uniapp的.sync修饰符

先用一个案例引出.sync修饰符 就是这样一个场景 父组件直接修改状态A当然没问题,但是子组件不能直接修改状态A,因为单向数据流限制 单向数据流 uni-app官网 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会…

AFP vs SMB vs NFS: 谁是最好的数据传输协议?

目录 SMB: 什么是SMB 协议? NFS: 什么是NFS协议? AFP: 设么是AFP协议? 如何选择合适的传输协议? 场景1: 大型企业 场景2: 小型网站设计公司 场景3: Linux软件开发组 可以在互联网上使用这些协议吗? AFP vs SMB vs NFS …

Docker的安装和镜像容器的基本操作

Docker的安装和镜像容器的基本操作 Docker 概述Docker与虚拟机的区别namespace的六项隔离Docker核心概念 安装 DockerDocker 镜像操作搜索镜像获取镜像镜像加速下载查看镜像信息查看下载的镜像文件信息查看下载到本地的所有镜像根据镜像的唯一标识 ID 号,获取镜像详…

基于struts + spring + hibernate的题库与试卷管理系统源码

3需求分析和设计方案 3.1 题库管理 3.1.1 试题管理需求分析 试题管理是整个系统非常核心的模块,它基于知识点模块、章节模块、课程模块、题型管理模块完成的基础上的。其中核心元素是试题,通过试题将题库中的各模块连接起来。 试题管理分为题库录入和…

MyBatisPlus学习

官网:https://mp.baomidou.com/ MyBatis Plus,简化 MyBatis ! 1.概述 需要的基础:把我的MyBatis、Spring、SpringMVC就可以学习这个了! 为什么要学习它呢?MyBatisPlus可以节省我们大量工作时间&#xff0…

随机模型预测控制(SMPC)——考虑概率约束(Matlab代码实现)

目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨‍💻4 Matlab代码 💥1 概述 模型预测控制(MPC)又称为滚动时域控制和滚动时域控制,是一种强有力的工程应用技术。MPC的价…

springboot +flowable,处理 flowable 的用户和用户组(一)

一.简介 对于flowable是什么以及关于此框架的具体信息可以参看此项目的官方文档:https://www.flowable.org/docs/userguide/index.html Flowable is a light-weight business process engine written in Java.这是官网文档对此框架的完美解释:Flowable…

AIGC技术周报|清华、北邮新研究:让文生图AI更懂你

AIGC通过借鉴现有的、人类创造的内容来快速完成内容创作。ChatGPT、Bard等AI聊天机器人以及DallE 2、Stable Diffusion等文生图模型都属于AIGC的典型案例。「AIGC技术周报」将为你带来最新的paper、博客等前瞻性研究。 OpenAGI:当大模型遇见领域专家 “愿原力与大型…

ctfshow_WEB_web2 wp

前言 写这个是因为。。。我想摆烂,就去从最简单的题开始做了,想着交一道题是一道嘛,总之觉得这样做很适合欺骗安慰自己(逃 然后我发现我错了,我第二道题就做了好久还没做出来,甚至最后去点开了hint…… ps…

多数据源事务

使用 DATASOURCE 模式后,可能一个操作涉及到多个数据源。例如说:创建租户时,即需要操作主库,也需要操作租户库。 考虑到多数据的数据一致性,我们会采用事务的方式,而使用 Spring 事务时,会存在…

FTP服务--文件传输协议

FTP服务--文件传输协议 一、FTP服务端口二、FTP服务主动模式与被动模式三、FTP服务配置方法设置匿名用户访问的FTP服务(最大权限)配置文件中常见字段的含义 一、FTP服务端口 FTP服务器默认使用TCP协议的20,21端口与客户端进行通信 20端口:用于建立数据连接&#x…

GDB调试的基本使用、GDB调试多进程

1. 编译时加选项-g,生成具有调试信息的程序 gcc -g test.c -o test 2. 启动GDB (1)启动GDB: gdb test (2)设置运行时参数:(主函数中可接收运行时参数) set args //…

设计模式实现之state模式

状态模式的定义:Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.(当一个对象在状态改变时允许其改变行为,这个对象看起来像其改变了其类)。 一个对象可以…

KVM Bridge 配置

目录 Bridge方式原理 网桥方式配置步骤 1、编辑修改网络设备脚本文件,增加网桥设备br0 2、编辑修改网络设备脚本文件,修改网卡设备ens33 3、重启宿主机查看配置 虚拟机配置 Bridge方式原理 如上图,网桥的基本原理就是创建一个网桥并将…

IOC使用Spring实现附实例详解

目录 一、相关导读 1. Maven系列专栏文章 2. Mybatis系列专栏文章 3. Spring系列专栏文章 二、前言 Spring简介 Spring体系结构 三、Spring实现IOC 1. 创建Maven工程,引入对应依赖 2. 创建实体类,Dao接口及实现类 3. 编写xml配置文件 4. 测试…

【翻译一下官方文档】之uniapp基础内容

目录 表单控件绑定 v-model v-model结合表单 easycom组件规范 传值 prop emit 表单控件绑定 v-model 你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-mo…

如何高效提高倾斜摄影三维模型顶层合并的技术方法分析

如何高效提高倾斜摄影三维模型顶层合并的技术方法分析 1、倾斜摄影三维模型顶层合并 1.1倾斜摄影三维模型是一种基于倾斜摄影技术,通过多个角度拍摄同一区域的影像,利用计算机图像处理和三维重建技术生成的三维地理信息数据。由于一个大区域可能需要多块…

智能家居代码架构---简单工厂模式

(11条消息) 智能家居 (10) ——人脸识别祥云平台编程使用(编译libcurl库支持SSL,安装SSL依赖库libssl、libcrypto)openssl 依赖库行稳方能走远的博客-CSDN博客 看上面这个博客的往期文章 代码设计经验的总结,稳定,拓展性更强。一系列编程思…

倾斜摄影三维模型格式转换OSGB 到3Dtitles 实现的常用技术方法

倾斜摄影三维模型格式转换OSGB 到3Dtitles 实现的常用技术方法 倾斜摄影三维模型是一种用于建立真实世界三维场景的技术,常用于城市规划、土地管理、文化遗产保护等领域。在倾斜摄影模型中,OSGB格式和3Dtiles格式都是常见的数据格式。其中,OS…