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

8 回复

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

更多关于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项目中,onPageScrollsetup()中失效的问题通常与编译配置或项目缓存有关。以下是几个可能的解决方案:

  1. 检查编译器配置:确保manifest.json中已正确配置Vue3和TypeScript支持。在"vue"节点下确认版本设置为"3"

  2. 清理项目缓存:删除unpackagenode_modules目录,执行npm install重新安装依赖,并重启HBuilderX。

  3. 检查页面结构:确认页面根元素未设置height: 100%overflow: hidden,这些样式可能阻止滚动事件触发。

  4. 尝试替代写法:使用<script setup>语法或Options API验证功能是否正常:

    <script lang="ts">
    export default {
      setup() {
        // 当前写法
      },
      onPageScroll(e) {
        console.log(e.scrollTop)
      }
    }
    </script>
回到顶部