uniapp 提示成功之后再跳转页面

相信经常使用uniapp的童鞋们对提示完后再跳转真的是又爱又恨，为什么呢？因为我们在使用uni.showToast进行提示的过程中又写了uni.navigateTo需要跳转，再比如提交表单，提交完成需要先为用户提示是否成功之后再进行跳转。会发现，提示几乎是一闪而过甚至看不到提示信息，这是因为uni.showToast为异步方法，没有等待提示完成即跳转了页面。
我们的需求将是优雅的解决这个问题！
github: https://github.com/im76ix/oopsoh
gitee: https://gitee.com/im76ix/oopsoh

通常解决方案

通常我们都会使用以下写法来阻止立马跳转。但是！很不爽的就是不优雅！不优雅！不优雅！

// 提示
uni.showToast({
	title: "hello world",
	duration: 2000
})
// 延时跳转
setTimeout(() => {
	uni.navigateTo({
		url: "/pages/index/index"
	})
}, 2000)

---

那么oopsoh它来了。请继续往下看👇

oopsoh

安装 🚀

npm i oopsoh
or
pnpm add oopsoh

导入

import { oh } from 'oopsoh'

使用

0. 类型介绍

interface Oops {
  oh(msg: string, options?: Options, func: () => void): void
}

1. 简单提示

oh('hello world')

2. 带图标的提示

oh('hello world', { ico: 'success' })

3. 提示完成后跳转页面

只需要在oh函数第三个参数中传入一个函数，当提示完成之后即可自动执行该函数，假如你需要自定义提示时间，请往下看参数介绍

oh('提示信息', { ico: 'success' }, () => {
  Page.go('pages/home/index', { type: 'switchTab' }) // 页面跳转
})

这里的Page.go(xxx)等同于原生uni跳转的几个函数，我也无效封装了一个ts支持友好版本的。
链接：https://blog.csdn.net/qq_45602658/article/details/133888595

4. 详细参数介绍

   • ico ?: “success” | “error” | “loading” | “none” 默认 none
   • duration ?:number 默认1500ms 提示停留时间
   • mask ?:boolean 默认 false 提示中是否允许点击遮罩层
   • image ?:string 展示自定义图片
   • success ?: () => void 成功回调，一般用不到
   • fail ?: () => void 失败回调，一般用不到

5. 建议与意见

如您在使用过程中有好的意见或建议请在此处提出来，本练习生将第一时间修改更新😄