- 发布：2023-10-25 18:39
- 更新：2024-03-26 17:28
- 阅读：426
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS 13.4.1
HBuilderX版本号： 3.94
手机系统： 全部
手机系统版本号： Android 14
手机厂商： 华为
页面类型： vue
vue版本： vue3
打包方式： 离线
项目创建方式： CLI
CLI版本号： 3.0.0-3081220230817001
测试过的手机：
示例代码：
具体看复现步骤吧
具体看复现步骤吧
操作步骤：
bugPage.vue
<template>
<bug-component></bug-component>
<view v-for="i in 1000" :key="i">{{ i }}1</view>
</template>
<script setup>
import BugComponent from "./bugComponent.vue";
// onPageScroll
// 后续测试发现，只要页面文件里有 onPageScroll 这个关键词，哪怕是注释，子组件的 onPageScroll 都能生效
</script>
<style lang="less"></style>
bugComponent.vue
<template>
<view class="bugC">
子组件 onPageScroll 返回值：
<view>{{ scroll }}</view>
</view>
</template>
<script setup>
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";
const scroll = ref({});
onPageScroll(function (res) {
scroll.value = res;
});
</script>
<style lang="less">
.bugC {
position: fixed;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background: #66ccff;
}
</style>
额外发现
在 hook 里写了 onPageScroll ，引入到页面中，也不行
bugPage.vue
<template>
<bug-component></bug-component>
<view v-for="i in 1000" :key="i">{{ i }}1</view>
</template>
<script setup>
import BugComponent from "./bugComponent.vue";
// onPageScroll
// 后续测试发现，只要页面文件里有 onPageScroll 这个关键词，哪怕是注释，子组件的 onPageScroll 都能生效
</script>
<style lang="less"></style>
bugComponent.vue
<template>
<view class="bugC">
子组件 onPageScroll 返回值：
<view>{{ scroll }}</view>
</view>
</template>
<script setup>
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";
const scroll = ref({});
onPageScroll(function (res) {
scroll.value = res;
});
</script>
<style lang="less">
.bugC {
position: fixed;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background: #66ccff;
}
</style>
额外发现
在 hook 里写了 onPageScroll ，引入到页面中，也不行
预期结果：
组件中的 onPageScroll 方法能直接生效
组件中的 onPageScroll 方法能直接生效
实际结果：
只有在页面组件中写了 onPageScroll 方法，组件中的 onPageScroll 方法才生效
只有在页面组件中写了 onPageScroll 方法，组件中的 onPageScroll 方法才生效
bug描述：
用的 js + vue3，组件是 <script setup> 写法
在某个组件中使用了 onPageScroll 方法，然后发现
如果引用这个组件的「页面.vue」没有 「 import { onPageScroll } from "@dcloudio/uni-app"」的话
那么组件里的 onPageScroll 就不会生效
2 个回复
7***@qq.com
解决了吗？
7***@qq.com
import {
onLoad,
onReady,
onShow,
onPageScroll,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app'
onPageScroll((e)=>{
页面这样写也不生效，不要问我，页面高度6000px,是有滚动条的，而且vue2 的正常能捕获页面事件的。2024-03-26 记录于此。个人微信 lrbfly 如果有，工友解决了，请v我，我感谢您