uni-app vue3 + vite 在小程序环境下 onPageScroll 无效

uni-app vue3 + vite 在小程序环境下 onPageScroll 无效

5 回复

setup中的代码，是动态执行的，在小程序上，不能动态添加onPageScroll事件， 所以需要使用options方式主动定义onPageScroll之后，setup中的onPageScroll才可以正常使用 export default {
onPageScroll(){
}
}

更多关于uni-app vue3 + vite 在小程序环境下 onPageScroll 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


尝试了下，解决了。

回复 1***@163.com: 大佬 怎么解决的，可以贴一下代码么

能贴一下具体代码吗？这个怎么解决的

在 uni-app 的 Vue3 + Vite 环境下，onPageScroll 在小程序中失效，通常是由于以下原因及解决方案：

  1. 页面未配置 onPageScroll 选项：在 Vue3 的 setup 语法中，需使用 onPageScroll 生命周期钩子，并确保在页面组件中正确注册。示例：

    import { onPageScroll } from '[@dcloudio](/user/dcloudio)/uni-app'
export default {
  setup() {
    onPageScroll((e) => {
      console.log('滚动距离:', e.scrollTop)
    })
  }
}

  2. Vite 构建配置问题：检查 vite.config.js 中是否正确配置了 [@dcloudio](/user/dcloudio)/uni-app 插件。确保插件版本与 uni-app 版本兼容，并尝试升级到最新稳定版。

  3. 小程序页面样式限制：若页面根元素高度未撑开（如未设置 height: 100%），可能导致滚动事件无法触发。需确保页面容器可滚动：

    page { height: 100%; }
回到顶部