解决微信小程序 toast 和 loading 遮挡问题(uniapp)

实现思路
重写 wx 的 showLoading ,hideLoading ,showToast ,hideLoading 这几个方法, 在使用前添加判断

代码(注意此代码应该在调用原生api之前执行

// 
let isShowLoading = false;
let isShowToast = false;
const { showLoading, hideLoading, showToast, hideToast } = wx;
Object.defineProperty(wx, "showLoading", {
  configurable: true, // 是否可以配置
  enumerable: true, // 是否可迭代
  writable: true, // 是否可重写
  value(...param) {
    if (isShowToast) {
      // Toast优先级更高
      return;
    }
    isShowLoading = true;
    return showLoading.apply(this, param); // 原样移交函数参数和this
  },
});
Object.defineProperty(wx, "hideLoading", {
  configurable: true, // 是否可以配置
  enumerable: true, // 是否可迭代
  writable: true, // 是否可重写
  value(...param) {
    if (isShowToast) {
      // Toast优先级更高
      return;
    }
    isShowLoading = false;
    return hideLoading.apply(this, param); // 原样移交函数参数和this
  },
});
Object.defineProperty(wx, "showToast", {
  configurable: true, // 是否可以配置
  enumerable: true, // 是否可迭代
  writable: true, // 是否可重写
  value(...param) {
    if (isShowLoading) {
      // Toast优先级更高
      wx.hideLoading();
    }
    isShowToast = true;
    return showToast.apply(this, param); // 原样移交函数参数和this
  },
});
Object.defineProperty(wx, "hideToast", {
  configurable: true, // 是否可以配置
  enumerable: true, // 是否可迭代
  writable: true, // 是否可重写
  value(...param) {
    isShowToast = false;
    return hideToast.apply(this, param); // 原样移交函数参数和this
  },
});

注意:使用了这个之后会出现一个问题 showToast 之后需要再调用一次 hideToast 不然会出现 loading 不显示 bug

解决办法 (注意:这样会导致 showToast 会在 1.5s 后直接关闭)

return showToast.apply(this, {
    ...param,
    success:() =>{
        setTimeout(() => {
            wx.hideToast()
        },1500)
    }
})
  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序toast是一种轻量级的提示框组件,一般用于展示简短的文字信息。然而,toast组件并不支持直接显示图片。不过我们可以通过一些技巧间接实现在toast中显示图片的效果。 一种常用的方法是在toast中使用自定义的图标,而不是直接显示图片。我们可以使用Font Awesome等图标库中的图标,然后在toast中设置相应的图标类名,从而实现在toast中显示图标的效果。这个图标可以是一个代表图片的图标,这样就能给用户一个视觉上的提示,让用户知道图片相关的内容。 另一种方法是结合toast组件和一个自定义的弹窗组件来实现。我们可以使用弹窗组件来展示图片,并设置一个透明的背景色,从而实现类似于toast的效果。在弹窗中展示图片后,我们可以设置一个定时器,在一定的时间后关闭弹窗,从而达到toast显示图片的效果。 除此之外,我们还可以考虑使用其他的提示组件,如基于canvas等技术实现的自定义提示组件,从而实现在微信小程序中直接在toast中显示图片的效果。这种方式相对来说比较复杂,需要开发者自己实现,并且可能会涉及到一些底层的API或者库的使用。 综上所述,微信小程序toast组件本身并不支持直接显示图片,但我们可以通过一些技巧或者组合其他的组件来实现在toast中显示图片的效果。开发者可以根据自己的需求和技术水平选择合适的方法来实现这个功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值