解决小程序中 iOS 可以正常滚动，而 Android 失效问题
在开发小程序时，我们经常会遇到一些平台兼容性问题。最近，我在开发一个小程序时遇到了一个问题：在 iOS 设备上可以正常滚动加载更多数据，而在 Android 设备上却无法正常工作。经过一番调试和研究，我找到了一种可靠的解决方案，结合了 Intersection Observer 和传统的滚动事件监听，确保在所有设备上都能正常工作。
问题描述
在小程序中，我们需要实现一个列表的无限滚动加载功能。当用户滚动到底部时，自动加载更多数据。在 iOS 设备上，这个功能可以正常工作，但在 Android 设备上，滚动事件无法正常触发，导致无法加载更多数据。
解决方案
为了确保在所有设备上都能正常工作，我们可以结合 Intersection Observer 和传统的滚动事件监听来实现加载更多数据的功能。这样可以确保在某些设备上 Intersection Observer 可能不可靠的情况下，仍然可以通过滚动事件来触发加载更多数据。
实现步骤
-
使用 Intersection Observer 监听滚动到底部： Intersection Observer 是一种现代的 API，可以用来检测元素是否进入视口。我们可以使用它来监听
.loading元素是否进入视口，从而触发加载更多数据的操作。 -
使用传统的滚动事件监听： 传统的滚动事件监听可以确保在 Intersection Observer 可能不可靠的情况下，仍然可以通过滚动事件来触发加载更多数据。
-
结合两种方法： 结合 Intersection Observer 和传统的滚动事件监听，确保在所有设备上都能正常工作。
代码示例
下面是结合两种方法的代码示例：
let observer: IntersectionObserverconst handleScroll = (e: any) => {const listElement = e.targetconst scrollTop = listElement.scrollTopconst clientHeight = listElement.clientHeightconst scrollHeight = listElement.scrollHeightif (scrollTop + clientHeight >= scrollHeight - 10) {if (!isLoading.value && !isGetAll.value) {console.log('到底了')getList() // 接口返回的列表数据，按需添加即可}}
}onMounted(() => {getList()// 使用 Intersection Observer API 监听滚动到底部observer = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting && !isLoading.value && !isGetAll.value) {console.log('到底了')getList()}})},{root: document.querySelector('.list'),threshold: 1.0,},)const sentinel = document.querySelector('.loading')if (sentinel) {observer.observe(sentinel)}// 监听滚动事件，分页加载数据const listElement = document.querySelector('.list')if (listElement) {listElement.addEventListener('scroll', handleScroll)}
})onUnmounted(() => {if (observer) {observer.disconnect()}const listElement = document.querySelector('.list')if (listElement) {listElement.removeEventListener('scroll', handleScroll)}
})css
.list {padding: 12px 20px 0;height: 100vh;overflow: auto;// 其他标签样式}结论
通过结合 Intersection Observer 和传统的滚动事件监听，我们可以确保在所有设备上都能正常工作，并且避免重复加载数据的问题。这种方法不仅解决了 iOS 和 Android 设备之间的兼容性问题，还提高了代码的可靠性和可维护性。
（注意：仅供参考）
)
