uni-app vue3+ts在setup(){}方法内onPageScroll()失效
uni-app vue3+ts在setup(){}方法内onPageScroll()失效
操作步骤:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view v-for="(item,index) in 100" :key="index">
{{item}}
</view>
</view>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
export default defineComponent({
setup() {
onLoad(() => {
console.log('onLoad')
})
onPageScroll((eve: { scrollTop: number }) => {
console.log(eve)
})
return {
title: 'Hello'
}
}
})
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
预期结果:
- 滚动页面,
onPageScroll方法有输出日志
实际结果:
- 滚动页面,
onPageScroll没有输出日志
bug描述:
这个情况非常诡异,描述起来会很长。。。
先说一下起因,上个月底用 HBX 创建了一个新的项目,项目名为 A,使用 vue3 的语法,打算将老的项目 oldA (vue2 的语法),部分功能搬到项目 A 中,并用 vue3 + ts 语法重写,写到一个页面有 onPageScroll 的功能时,发现该功能失效,console.log() 没有日志,核心写法如下:
<script lang="ts">
import { defineComponent, ... ... } from 'vue'
import { onPageScroll, ... ...} from '@dcloudio/uni-app'
export default defineComponent({
setup() {
// ...
onPageScroll((eve: { scrollTop: number }) => {
console.log(eve.scrollTop);
// ...
})
// ...
return { ... }
}
})
</script>
但是,我将写法修改成 <script lang="ts" setup>... </script> 这种的时候,onPageScroll 又有用了。因个人习惯,不太喜欢第二种写法,而且我也很好奇,为什么第一种写法没有生效。
后来,我又创建了一个项目 B,直接创建了个 test.vue 的页面,第一种写法最精简的使用 onPageScroll,运行有用,也有日志输出。这时候我就在想是不是我哪里写错了,我来回检查也没看出有什么问题,我就把项目 B 的 test.vue 代码,拷贝覆盖到项目 A 有 onPageScroll 问题的页面中,运行,诡异的来了,onPageScroll 没有日志输出!!!
我就奇了怪了,同样的页面代码,项目 B 中有用,项目 A 中却没有用,我就在想是不是有什么其它的文件干扰到了,于是,我就将 项目 A 根目下的文件和文件夹,一个一个的拷贝 并覆盖到 项目 B 中,每拷贝一个文件,我都会运行一次看看 onPageScroll 是否有效,当然会保证运行不报错的情况下。直到我把项目 A 中的全部文件都拷贝覆盖到项目 B 中,项目 B 的 onPageScroll 依然有效并能输出日志!!此时项目 A 和项目 B 除了文件名不一样,里面的代码全都一模一样,但只有项目 B 中 onPageScroll 是有用的,这不是见鬼了吗?
后面,我把 项目 A 原地拷贝了一份,文件名为 Acopy,这个项目 Acopy 的 onPageScroll 中也没有用,我就把项目 B 也原地拷贝,文件名为 Bcopy,就很神奇,项目 Bcopy 的 onPageScroll 有用。我就很奇怪啊,这四个项目的代码一模一样,只有项目 B 和项目 Bcopy 的 onPageScroll 有用,太诡异了。
下面我又做了一个操作,这个操作的结果给我整懵了,我将 项目 Bcopy 改了个文件名 Bcopy2(manifest.json 没改),运行项目 Bcopy2,onPageScroll 没有用,没有日志输出!!!
接着,我将项目 A 的那个有问题的页面 lang="ts" 去掉,里面的 ts 语法也去掉,其它的没动,onPageScroll 又有用了。我真的看不懂了,头一天下午发现的问题,第二天早上开机发现还是有问题,就做了上面的操作,给我恶心坏了。
又折腾了一会,我把微信开发工具卸载了,重新装回了卸载之前的版本 Stable Build (1.06.2504010),HBuilderX 目录下 reset.bat 操作了两下,C盘的 AppData 关于 HBuilderX 都给删了,最后将 HBuilderX 绿色文件包也给删了,重新下了个 4.66 的包并解压到原安装路径。然后创建了个新项目 N,在默认的 index.vue 中 用上面的第一种写法直接用 onPageScroll,运行,onPageScroll 无效 没有日志输出!
然后又创建了个新项目 N2,和项目 N 的操作一样,只是 <script> 没有加 lang="ts",没有用 ts 语法,运行,onPageScroll 有用!!!
接着把项目 N2 的加上 lang="ts" 并用上 ts 语法,为确保编译到了,加了个 onLoad 并输出,运行,onPageScroll 还是有用!
我又把项目 N 的 ts 去掉,运行 onPageScroll 无效!
然后我把 HBX 和开发工具都关闭,重新打开 HBX,记住此时的 N 是没有 ts,N2 是有 ts 的。
运行 N,onPageScroll 有用,把项目 N 改成 ts ,onPageScroll 也有用。
停止运行项目 N,运行 N2,onPageScroll 没用了!!!
将 N2 的 ts 去掉,运行 onPageScroll 又有用了。
换了 HBX 4.75 alpha 的也是这样的问题
根据我卸载重装后的操作,我是不是可以得出个结论:新项目用 ts 写 onPageScroll 会没用,去掉 ts 也没用;而先不用 ts 写,onPageScroll 就用,并且运行后在改成 ts 也还是有用。但是 我的 项目 B 一直都是 ts,卸载重装后也运行了 B,onPageScroll 一直都是有用的,真的很诡异。
更多关于uni-app vue3+ts在setup(){}方法内onPageScroll()失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
感谢反馈,问题已复现,已加分。先使用附件的形式规避这个问题吧。
更多关于uni-app vue3+ts在setup(){}方法内onPageScroll()失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
和同事确认了一下,这里是有些限制导致不能写在setup里面,可以考虑这样写
<script lang="ts"> import { defineComponent, onMounted } from 'vue' import { onLoad, onPageScroll } from '@dcloudio/uni-app' export default defineComponent({ setup() { onMounted(() => { console.log('onLoad') }); return { title: 'Hello' } }, onPageScroll() { console.log('xx') } }) </script>[捂脸] 我找问题的时候,也用过这写法,虽然有用,但总感觉写在外面有点不伦不类,所以当时没采用这种写法。 最后还想请问一下,这个问题会考虑后面给修复吗?
回复 我这头像像骷髅: 后续会讨论下这个问题
回复 DCloud_UNI_JBB: 好的
回复 DCloud_UNI_JBB: 4 个月啦,这问题还在呢
在uni-app的Vue3+TS项目中,onPageScroll在setup()中失效的问题通常与编译配置或项目缓存有关。以下是几个可能的解决方案:
-
检查编译器配置:确保
manifest.json中已正确配置Vue3和TypeScript支持。在"vue"节点下确认版本设置为"3"。 -
清理项目缓存:删除
unpackage、node_modules目录,执行npm install重新安装依赖,并重启HBuilderX。 -
检查页面结构:确认页面根元素未设置
height: 100%或overflow: hidden,这些样式可能阻止滚动事件触发。 -
尝试替代写法:使用
<script setup>语法或Options API验证功能是否正常:<script lang="ts"> export default { setup() { // 当前写法 }, onPageScroll(e) { console.log(e.scrollTop) } } </script>


