页面交互反馈可以通过: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
,其中包含用户选择的信息。