uni-app uni.$on里调用showToast无效

uni-app uni.$on里调用showToast无效

示例代码：

uni.$on('useCoupon', data => {
uni.showToast({
icon:'none',
mask:true,
title:'支付金额未满足使用条件'
})
})

操作步骤：

pageA调用

function selectCoupon(item) {
uni.$emit('useCoupon', coupon.value)
uni.navigateBack()
}

pageB调用

uni.$on('useCoupon', data => {
uni.showToast({
icon:'none',
mask:true,
title:'支付金额未满足使用条件'
})
})

预期结果：

在$on里面弹出toast消息提示弹窗

实际结果：

未弹出

bug描述：

uni.$on里调用uni.showToast无效
信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 Windows 11 专业版 24H2
HBuilderX 正式
版本号 4.56
开发工具 第三方开发者工具 1.06.2412050 win32-x64
基础库版本 3.7.12
项目创建方式 HBuilderX

更多关于uni-app uni.$on里调用showToast无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这里是执行时机的问题，先执行了$emit 触发了 $on的 回调函数，再进行页面流转，解决办法是 给你的 $on 回调函数里加个定时器

更多关于uni-app uni.$on里调用showToast无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


或者 先回到上一页，在成功的回调函数里 执行 $emit
uni.navigateBack({
success() {
uni.$emit(‘useCoupon’, coupon.value)
}
})

这个问题的原因是页面跳转时序问题。当pageA触发uni.navigateBack()后，pageB可能已经被销毁，导致$on回调中的showToast无法执行。

解决方案有以下几种：

  1. 在pageA中先显示toast，再跳转：
function selectCoupon(item) {
  uni.showToast({
    icon:'none',
    title:'支付金额未满足使用条件'
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
  1. 使用页面生命周期确保toast显示：
// pageB
onShow() {
  uni.$on('useCoupon', this.handleCoupon)
},
onHide() {
  uni.$off('useCoupon', this.handleCoupon)
},
methods: {
  handleCoupon(data) {
    uni.showToast({
      icon:'none',
      title:'支付金额未满足使用条件'
    })
  }
}
  1. 改用全局事件+setTimeout：
uni.$emit('useCoupon', coupon.value)
setTimeout(() => {
  uni.navigateBack()
}, 100)
回到顶部