前言:在进行开发中,难免会遇到与客户进行交互的问题,好的交互不仅可以增加用户体验也可以让程序更加完美。比如PC端常用的ElementUI中的Message,今天我们来看一看uniapp原生的交互。

一.uni.showToast(OBJECT)

1.概述

显示消息提示框

2.OBJECT参数

参数	类型	必填	说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标,参数见下方说明
image	String	否	自定义图标的本地路径（app端暂不支持gif）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。参数详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

(1).icon值说明

值	说明
success	显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
error	显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
fail	显示错误图标，此时 title 文本无长度显示。
exception	显示异常图标。此时 title 文本无长度显示。
loading	显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
none	不显示图标，此时 title 文本在小程序最多可显示两行，App仅支持单行显示。

(2).position 值说明（仅App生效）

值	说明
top	居上显示
center	居中显示
bottom	居底显示

3.举例

注意:默认为success图标

uni.showToast({title:'打开消息提示'
})

二.uni.hideToast()

1.概述

顾名思义,这个api就是隐藏消息提示框

2.举例

uni.hideToast()

三.uni.showLoading(OBJECT)

1.概述

显示 loading 提示框,通常我们可以使用在进行网络请求或者在进行下一步操作中使用。

2.OBJECT参数说明

参数	类型	必填	说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

3.举例

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

四.uni.hideLoading()

1.概述

隐藏 loading 提示框

2.举例

const uploadImage = (url, data) => {uni.showLoading({title: '加载中'});return new Promise((resolve, reject) => {uni.uploadFile({url: BASE_URL + url,filePath: data,name: 'file',formData: {},success: (uploadFileRes) => {let parms = uploadFileRes.dataresolve(parms)uni.hideLoading();},fail: () => {uni.hideLoading();uni.showToast({title: '图片上传失败',icon: 'none'})}});})
}

uniapp进行交互反馈相关推荐

微信小程序中界面常见的交互反馈、用户即时反馈
用户和小程序上进行交互的时候,某些操作可能比较耗时,我们应该予以及时的反馈以舒缓用户等待的不良情绪. 1 触摸反馈通常页面会摆放一些button按钮或者view区域,用户触摸按钮之后会触发下一步的操 ...
uniapp php交互,uni-app路由跳转及参数的传参和接收
1.保留当前页面,跳转到应用内的某个页面,使用uni.navigateTo: 示例: 在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1& ...
电源完整性系统设计总结
1.为什么要重视电源噪声问题查看全文 http://www.taodudu.cc/news/show-4423391.html 相关文章: 史上最牛总结!电源完整性设计请看这一篇深扒中国最神秘的百 ...
（个人使用）uni-app开发（官方资源）· 汇总
文章目录 (个人使用)uni-app开发(官方资源)· 汇总 1. [uni-app官方框架](https://uniapp.dcloud.io/collocation/pages) 2. uni-a ...
微信小程序和uni-app面试高频知识点
微信小程序微信小程序的项目结构前端代码分为结构层html(WXML),表现层css(WXSS),行为层 js,在这之前首先给大家介绍一下小程序里面的一些文件类型及用途: .json 后缀的 JSO ...
Uni-app API
Uni-app的各种api,各种功能还是很全面的,而且基于vue用法,本身也带有自己的一套UI系统,代码也能兼容app和小程序,还是挺方便的. 基础 #日志打印日志打印向控制台打印日志 ...
uniApp入门(一)
目录一.项目准备 1.1.创建项目 1.2.创建页面 1.3.运行项目 1.4.pages.json文件的页面配置与全局配置 1.5.rpx单位二.内置组件 2.1.基础内容 2.2.视图容器 2 ...
uniapp 旅游_uni-app旅游类跨平台APP制作实战教程
路由:navigator 和 uni.navigate 服务端通讯:uni.request 插件:glance顶吸滑动导航栏界面滚动:scroll-view 轮播图:swiper及自定义面板指示器 ...
uni-app前端开发(零)
uni-app学习 uni-app学习手册小科普手机宽度 750rpx 另一种表示方法100VW/VH,相当于100% 动态代码前要加 ' : ' /* scoped使样式只在当前页面中使用 */ ...

uniapp进行交互反馈

目录:

一.uni.showToast(OBJECT)

1.概述

2.OBJECT参数

(1).icon值说明

(2).position 值说明（仅App生效）

3.举例

二.uni.hideToast()

1.概述

2.举例

三.uni.showLoading(OBJECT)

1.概述

2.OBJECT参数说明

3.举例

四.uni.hideLoading()

1.概述

2.举例

uniapp进行交互反馈相关推荐

最新文章

热门文章