解决 uni-app vue3 scroll-view 组件 @onScrollToLower 事件在移动设备键盘展开时有时不会触发的BUG

解决办法

用 @scroll 事件手动实现判断是否滚动到底部，以下是 uni-app Vue3 的示例。

<template>
  <scroll-view :scroll-y="true" @scroll="onScroll">
</template>

<script setup lang="ts">
import {
      
       getCurrentInstance} from 'vue'

const instance = getCurrentInstance()
const lowerThreshold = $ref(30) // 滚动到底部的阈值

const onScroll = () => {
      
      
  // @onScrollToLower 事件在移动端键盘展开时有时不会触发的BUG，所以需要手动判断是否滚动到底部
  uni
    .createSelectorQuery()
    .in(instance)
    .select('#scroll-view')
    .fields({
      
       size: true, scrollOffset: true, scrollHeight: true }, (res) => {
      
      
      const {
      
       height, scrollTop, scrollHeight } = res
      if (height + scrollTop >= scrollHeight - lowerThreshold) {
      
      
        // 已经滚动到最底部
        isScrollToLower = true
      } else {
      
      
        // 没有滚动到最底部
        isScrollToLower = false
      }
    })
    .exec()
}
</script>