当前位置: 首页 > news >正文

uniapp交互反馈api的使用示例

官方文档链接:uni.showToast(OBJECT) | uni-app官网

1.uni.showToast({}) 显示消息提示框。

常用属性:
title:页面提示的内容
image:改变提示框默认的icon图标
duration:提示框在页面显示多少秒才让它消失

添加了image属性后。


注意了,如果我们是去找iconfont的图标,最好选白色的图标rgb(255,255,255),因为默认的背景色是灰色的,如果图标是其他颜色,会有色差跟背景不搭。

<template><view class="content"><button type="primary" @tap="addData">添加数据</button></view>
</template><script>export default {methods: {addData:() => {uni.showToast({title:"数据删除成功!",duration:2000,position:200,image:"../../static/delete.png"})}}}

此外呢,image属性还可以使用.gif图像,不过要找跟背景色一致的.gif图像,不然就像这样,格格不入。

2. uni.showLoading({})显示一个正在加载的动态图标,一般搭配uni.hideLoading({})使用,一个显示一个隐藏,同时uni.hideLoading({})一般和setTimeout()使用。

案例代码:

<template><view class="content"><button type="primary" @tap="addData">添加数据</button></view>
</template><script>export default {methods: {addData:() => {uni.showLoading({title:"数据加载中!",})setTimeout(() => {uni.hideLoading()uni.showToast({title:"数据加载完成!"})},1500)}}}
</script>

3.uni.showModal({}) 显示模态弹窗,一般用来判断用户做出的选择,根据进一步触发逻辑。

可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 js中:alert、confirm。

属性很多,可以调文本颜色,文本内容输出,按钮显现与否等,具体看官方API:

<template><view class="content"><button type="primary" @tap="addData">添加数据</button></view>
</template><script>export default {methods: {addData: () => {uni.showModal({title: '温馨提示!',content: '据说林深时见鹿是真的!',confirmColor: "#4CD964",cancelColor: "#ffff00",success: (res) => {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}}}
</script>

4.uni.showActionSheet({})从底部向上弹出操作菜单

代码示例: 

<template><view class="content"><button type="primary" @tap="addData">添加数据</button></view>
</template><script>export default {methods: {addData: () => {uni.showActionSheet({itemList: ['上传作业', '下载作业', '查看作业'],success: function(res) {console.log('选中了第' + (res.tapIndex + 1) + '个按钮');},fail: function(res) {console.log(res.errMsg);}});}}}
</script>
http://www.lryc.cn/news/260071.html

相关文章:

  • XUbuntu22.04之HDMI显示器设置竖屏(一百九十八)
  • 如何用 Cargo 管理 Rust 工程系列 甲
  • Windows下ping IP+端口的方法
  • 【python】os.getcwd()函数详解和示例
  • Linux(二十一)——virtualenv安装成功之后,依然提示未找到命令(-bash: virtualenv: 未找到命令)
  • RNN介绍及Pytorch源码解析
  • Qt 文字描边(基础篇)
  • .360勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • Nginx(四层+七层代理)+Tomcat实现负载均衡、动静分离
  • 【前端】vscode 相关插件
  • 【MySQL】MySQL库的增删查改
  • 基于基于深度学习的表情识别人脸打分系统
  • Linux|操作系统|Error: Could not create the Java Virtual Machine 报错的解决思路
  • K8S学习指南-minikube的安装
  • 恒创科技:有哪些免费的CDN加速服务
  • Kibana搜索数据利器:KQL与Lucene
  • float32、int8、uint8、int32、uint32之间的区别
  • 百度搜索展现服务重构:进步与优化
  • icmp协议、ip数据包 基础
  • es6从url中获取想要的参数
  • 【elementui笔记:el-table表格的输入校验】
  • 每天五分钟计算机视觉:GoogLeNet的核心模型结构——Inception
  • 卡片C语言(2021年蓝桥杯B)
  • 数据库动态视图和存储过程报表数据管理功能设计
  • css+js 选项卡动画效果
  • [C错题本]转义字符/指针与首元素/运算
  • Layui继续学习
  • react+datav+echarts实现可视化数据大屏
  • CSS新手入门笔记整理:CSS浮动布局
  • 微服务组件Sentinel的学习(1)