我这头像像骷髅
我这头像像骷髅
  • 发布:2025-07-09 12:22
  • 更新:2025-07-09 16:23
  • 阅读:44

【报Bug】vue3+ts在setup(){}方法内onPageScroll()失效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 21H2 64 位操作系统, 基于 x64 的处理器

HBuilderX类型: 正式

HBuilderX版本号: 4.66

第三方开发者工具版本号: Stable Build (1.06.2504010)

基础库版本号: 3.8.9

项目创建方式: HBuilderX

操作步骤:

// 项目 N 下的 /pages/index/index

<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 一直都是有用的,真的很诡异。


下面的附件就是项目 N

2025-07-09 12:22 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

感谢反馈,问题已复现,已加分。先使用附件的形式规避这个问题吧。

DCloud_UNI_JBB

DCloud_UNI_JBB

和同事确认了一下,这里是有些限制导致不能写在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>

要回复问题请先登录注册