uni-app preloadPage的页面,onNavigationBarButtonTap事件第一次进入不生效,第二次进入点击才能生效

uni-app preloadPage的页面,onNavigationBarButtonTap事件第一次进入不生效,第二次进入点击才能生效

3 回复

请大佬尽快确认下

更多关于uni-app preloadPage的页面,onNavigationBarButtonTap事件第一次进入不生效,第二次进入点击才能生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


实测未复现,请提供可复现的demo

preloadPage 预加载的页面中,onNavigationBarButtonTap 事件首次进入不生效,通常是因为页面生命周期与预加载机制的执行顺序问题。

当使用 preloadPage 预加载页面时,页面实例已提前创建,但导航栏按钮的事件监听可能尚未绑定。首次进入时,页面 onLoad 触发较晚,导致导航栏按钮事件回调未及时注册。第二次进入时,页面实例已存在,事件监听已绑定,因此能正常响应。

解决方案:

  1. 延迟注册事件
    onReadyonShow 生命周期中手动注册导航栏按钮事件,确保事件绑定在页面渲染完成后执行。

    onReady() {
      uni.onNavigationBarButtonTap((e) => {
        // 处理按钮点击
      });
    }
    
  2. 使用全局事件总线
    通过 Vue 的全局事件机制(如 EventBus)传递点击事件,避免依赖页面生命周期的绑定时机。

    // 在预加载页面的 onLoad 中监听事件
    onLoad() {
      this.$on('navButtonTap', this.handleButtonTap);
    }
    // 在页面卸载时移除监听
    onUnload() {
      this.$off('navButtonTap', this.handleButtonTap);
    }
回到顶部