解决办法
用 @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>