uniapp Vue3页面触底事件onReachBottom报错

在uniapp中，使用Vue3开发页面时，触底事件onReachBottom可能会报错。这是因为在Vue3中，onReachBottom事件已经被废弃，需要使用新的API来实现。

解决方法如下：

使用新的API：在Vue3中，可以使用新的API来实现页面触底事件。可以使用IntersectionObserver API来监听页面底部元素是否出现在视口中。具体实现方式可以参考以下代码：

<template>
  <div ref="bottom">底部内容</div>
</template>

<script>
import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const bottomRef = ref(null)

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        console.log('到达页面底部')
      }
    })

    onMounted(() => {
      observer.observe(bottomRef.value)
    })

    onUnmounted(() => {
      observer.disconnect()
    })

    return {
      bottomRef
    }
  }
}
</script>

在模板中，使用ref指令将底部元素绑定到bottomRef变量上，在setup函数中创建IntersectionObserver实例，并使用onMounted和onUnmounted钩子函数来启动和停止观察器。

使用原生的onReachBottom事件：如果要继续使用onReachBottom事件，可以在页面配置文件（如pages/index/index.json）中添加"onReachBottomDistance": 50选项来设置触底距离。具体实现方式可以参考以下代码：

{
  "navigationBarTitleText": "首页",
  "onReachBottomDistance": 50
}

在页面配置文件中添加onReachBottomDistance选项，设置触底距离为50个px。这样，在触底时，系统会自动触发onReachBottom事件。

以上是解决uniapp Vue3页面触底事件onReachBottom报错的两种方法，开发者可以根据自己的需求选择适合自己的方法