【报Bug】vue3 H5端组件内onReachBottom无效

分类：uni-app

bug已修复

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

浏览器平台： Chrome

浏览器版本： 123.0.6312.106

项目创建方式： CLI

CLI版本号： 3.0.0-alpha-4010620240509002

示例代码：

page.vue

<script setup lang="ts">  
import { onReachBottom } from '@dcloudio/uni-app'  
import TestComponent from './TestComponent.vue'  

// 必须调用, 否则组件内的onReachBottom不会触发  
onReachBottom(() => {  
  console.log('onReachBottom by page')  
})  
</script>  

<template>  
  <TestComponent />  
</template>

TestComponent.vue

<script setup lang="ts">  
import { onReachBottom } from '@dcloudio/uni-app'  

onReachBottom(() => {  
  console.log('onReachBottom by component')  
})  
</script>  

<template>  
  <view :style="{ height: '200vh' }" />  
</template>

操作步骤：

如上

预期结果：

组件内也能调用onReachBottom或onPageScroll, 而不依赖页面

实际结果：

想要组件内的onReachBottom或onPageScroll生效, 必须在页面上也调用

bug描述：

vue3 H5端组件内onReachBottom无效
小程序端正常
H5端需要在页面也调用一下 onReachBottom(() => {}) 此时页面和组件内的onReachBottom都会触发
经测试onPageScroll也有同样的问题

2024-07-13 06:47 负责人:BFC 分享

4 个回复

最佳回复

DCloud

HBuilderX 4.25.2024081703-alpha 已修复。

4***@qq.com

VUE2组件内还是无效

2024-11-01 13:08

BFC

收到，正在排查

d大强

vue2中组件内的onReachBottom 也不生效。

2024-07-17 14:57
mengdodo

回复 d大强: 有结果没

2024-07-25 18:07
BFC

回复 d大强: vue2 组件内不支持onReachBottom，仅vue3支持。如果在vue2想要onReachBottom，可以自行通过父子组件通信来实现类似onReachBottom功能。

2024-07-29 14:55