Solve the bug that the @onScrollToLower event of the uni-app vue3 scroll-view component sometimes does not trigger when the keyboard of the mobile device is expanded

Solution

Use @scrollthe event to manually determine whether to scroll to the bottom, the following is uni-app Vue3an example of .

<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>