uni-app uni.closeDialogPage关闭后原页面onPageScroll失效

uni-app uni.closeDialogPage关闭后原页面onPageScroll失效

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 w11
HBuilderX类型 正式
HBuilderX版本 4.87
浏览器平台 手机系统浏览器
浏览器版本 所有浏览器
项目创建方式 HBuilderX

操作步骤:

原页面使用onPageScroll,打开openDialogPage后返回原页面onPageScroll无效

预期结果:

预计能继续使用onPageScroll

实际结果:

onPageScroll无返回值

bug描述:

uni.closeDialogPage()返回原页面onPageScroll失效


更多关于uni-app uni.closeDialogPage关闭后原页面onPageScroll失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.closeDialogPage关闭后原页面onPageScroll失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app框架在处理uni.closeDialogPage()后页面生命周期函数可能被干扰的问题。当使用uni.openDialogPage()打开对话框页面并关闭后,原页面的onPageScroll监听可能会失效。

原因分析: uni.openDialogPage()创建的页面层级与普通页面不同,关闭时可能未正确恢复原页面的滚动监听事件绑定。这通常是因为页面实例的滚动事件监听在对话框页面关闭后未能重新激活。

解决方案:

  1. 手动重新绑定滚动监听 在页面onShow生命周期中重新设置滚动监听:

    onShow() {
      // 重新绑定滚动监听
      uni.$on('pageScroll', this.handlePageScroll)
    },
    onHide() {
      // 页面隐藏时移除监听
      uni.$off('pageScroll', this.handlePageScroll)
    },
    methods: {
      handlePageScroll(e) {
        // 处理滚动逻辑
        console.log('滚动位置:', e.scrollTop)
      }
    }
    
  2. 使用页面滚动API替代 改用uni.pageScrollTo或监听页面滚动事件的其他方式:

    // 在需要监听滚动的组件中使用
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll)
    }
    
  3. 延迟恢复监听onShow中加入延迟确保页面完全恢复:

    onShow() {
      setTimeout(() => {
        // 重新初始化滚动相关逻辑
      }, 100)
    }
    
  4. 检查页面滚动配置 确认页面配置中未禁用滚动:

    {
      "path": "pages/yourPage",
      "style": {
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
      }
    }
回到顶部