页面交互反馈可以通过:uni.showToast(object)实现,常用属性有
ioc值说明
值 说明 success 显示成功图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度,App
仅支持单行显示。error 显示错误图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度,App
仅支持单行显示。fail 显示错误图标,此时 title 文本无长度显示。 exception 显示异常图标。此时 title 文本无长度显示。 loading 显示加载图标,此时 title 文本在 小程序
平台最多显示 7 个汉字长度。none 不显示图标,此时 title 文本在 小程序
最多可显示两
以下是不同值的效果图
除了使用系统提供的还可以使用自定义图标
案例代码
<template> <view class="content"> <button @click="showToast('success')">success</button> <button @click="showToast('error')">error</button> <button @click="showToast('fail')">fail</button> <button @click="showToast('exception')">exception</button> <button @click="showToast('loading')">loading</button> <button @click="showToast('none')">none</button> <button @click="myShowToast('自定义')">自定义</button> </view> </template> <script setup> var showToast = (str) => { uni.showToast({ title: str, icon: str }) } var myShowToast = (str) => { uni.showToast({ title: str, image:'/static/img/2.png' }) } </script>
uni.showLoading与uni.hideLoading
注意事项
确保成对使用: 确保每次调用
uni.showLoading
后都有相应的uni.hideLoading
调用来隐藏加载提示框。避免重复显示: 如果在同一个异步操作中多次调用
uni.showLoading
,可能会导致加载提示框无法正常隐藏。确保只在必要的地方调用。通过这种方式,可以有效地使用
uni.showLoading
和uni.hideLoading
来提高用户体验,确保用户在等待过程中得到及时反馈。
案例
<template> <view> <button @click="showLoading()">showLoading</button> <button @click="hideLoading()">hideLoading</button> </view> </template> <script setup> var showLoading = () => { uni.showLoading({ title: '加载中', }) } var hideLoading = () => { uni.hideLoading() } </script>
uni.showModal
显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm
<template> <view> <button @click="showModal()">showModal</button> </view> </template> <script setup> var showModal = () => { uni.showModal({ title: '提示', // 弹窗标题 content: '这是一个示例内容', // 弹窗主要信息 confirmText: '确定', // 确定按钮的文字,默认为“确定” cancelText: '取消', // 取消按钮的文字,默认为“取消” success: function(res) { if (res.confirm) { console.log('用户点击确定'); // 在这里处理用户点击确定后的逻辑 } else { console.log('用户点击取消'); // 在这里处理用户点击取消后的逻辑 } }, fail: function(err) { console.error('显示模态框失败:', err); } }); } </script>
参数说明
title
: 弹窗标题,字符串类型。content
: 弹窗内容,字符串类型。confirmText
: 确认按钮文字,默认是“确定”。cancelText
: 取消按钮文字,默认是“取消”。success
: 接口调用成功的回调函数,参数res
包含confirm
和cancel
两个属性,分别对应用户点击了确定和取消按钮。fail
: 接口调用失败的回调函数。
uni.showActionSheet
是一个用于在小程序或框架中弹出一个动作菜单的方法。这个方法接受一个配置对象
OBJECT
,该对象包含了动作菜单的相关设置。uni.showActionSheet({ itemList: ['选项1', '选项2', '选项3'], // 显示的按钮列表 itemColor: '#007AFF', // 按钮的文字颜色 cancelText: '取消', // 取消按钮的文字 success: function(res) { if (res.tapIndex >= 0) { console.log('用户选择了第 ' + (res.tapIndex + 1) + ' 个选项'); // 根据 res.tapIndex 执行相应操作 } }, fail: function(err) { console.error('显示操作菜单失败:', err); } });
具体来说,
uni.showActionSheet
的参数OBJECT
包含以下属性:
- itemList:数组类型,表示显示的按钮列表。
- itemColor:字符串类型,表示按钮的文字颜色。
- cancelText:字符串类型,表示取消按钮的文字。
- success:回调函数,当用户选择某个选项时触发。回调函数会传递一个参数
res
,其中包含用户选择的信息。