在UniApp中延迟跳转页面时，如何确保Toast提示信息在真机上清晰可见

2023-11-13 02:19:41







在UniApp中使用showToast方法提示用户时，可能会遇到提示信息在真机上一闪而过的现象。这可能是由于真机设备的性能差异造成的。为了解决此问题，可以采用以下方案：

**1. 使用setTimeout方法延迟跳转页面** 

```javascript
uni.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});

setTimeout(() => {
  uni.navigateTo({
    url: 'nextPage'
  });
}, 2000);

在上述代码中，我们使用setTimeout方法延迟了页面跳转的时间，使提示信息能够在屏幕上停留更长时间。

2. 使用Loading提示

uni.showLoading({
  title: '正在加载...'
});

setTimeout(() => {
  uni.showToast({
    title: '操作成功',
    icon: 'success',
    duration: 2000
  });

  setTimeout(() => {
    uni.hideLoading();
    uni.navigateTo({
      url: 'nextPage'
    });
  }, 2000);
}, 2000);

在上述代码中，我们使用showLoading方法显示了一个Loading提示，并在一定时间后关闭Loading提示并显示showToast提示信息。这样可以确保提示信息在屏幕上停留更长时间。

3. 使用全局变量控制跳转页面

let canNavigate = false;

uni.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});

setTimeout(() => {
  canNavigate = true;
}, 2000);

watch(canNavigate, (newVal, oldVal) => {
  if (newVal) {
    uni.navigateTo({
      url: 'nextPage'
    });
  }
});