Uniapp 之 解决uni.showToast、uni.showLoading、uni.hideLoading之间的冲突问题

  在我们使用uniapp时,通常会在调取接口的时候经常会使用到uni.showToast、uni.showLoading、uni.hideLoading这三个api,先简单查阅一下这三个api的作用官方文档;
  
  

问题阐述:

  在调取接口时,我们通常会在调取接口前给用户一个正在加载的一个提示框,也就是uni.showLoading,当接口可以访问成功时隐藏加载提示框(uni.hideLoading),然后根据访问成功后端返回的状态(success、error)来判断数据是否成功,当状态为success时需要给用户提示获取成功,反之提示获取失败,这时使用的就是消息提示框(uni.showToast);然而在调取接口时通常我们看到的是加载提示框在访问成功后隐藏了,但是我们后面设置的消息提示框 uni.showToast 却没有出现。
  
  
  
  
解决方案:

  不知道大家有没有注意消息提示框其实是可以设置显示状态的,就是icon设置项
  
在这里插入图片描述
  
接着我们再利用提示的延迟时间duration这个设置项来设置消息提示框的显示时间;
在这里插入图片描述
  
最后再利用一个api关闭消息提示框
在这里插入图片描述
  
显示加载提示框(此处利用的消息提示框实现的加载提示框)

// 显示加载提示框(此处利用的消息提示框实现的加载提示框)
uni.showToast({
    
    
	title: '加载中……',
	icon: 'loading',
	duration: 30000 // 当然这个时间可根据实用场景进行相关设置
})

  
随后在接口访问成功时关闭加载提示框

// 随后在接口访问成功时关闭加载提示框
uni.hideToast()

  
最后你就可以根据后端返回状态再去进行相对应的消息提示框了,并且可以正常的显示出来了。

猜你喜欢

转载自blog.csdn.net/Zhuangvi/article/details/112428693