解决小程序中ios可以正常滚动，而Android失效问题

解决小程序中 iOS 可以正常滚动，而 Android 失效问题

在开发小程序时，我们经常会遇到一些平台兼容性问题。最近，我在开发一个小程序时遇到了一个问题：在 iOS 设备上可以正常滚动加载更多数据，而在 Android 设备上却无法正常工作。经过一番调试和研究，我找到了一种可靠的解决方案，结合了 Intersection Observer 和传统的滚动事件监听，确保在所有设备上都能正常工作。

问题描述

在小程序中，我们需要实现一个列表的无限滚动加载功能。当用户滚动到底部时，自动加载更多数据。在 iOS 设备上，这个功能可以正常工作，但在 Android 设备上，滚动事件无法正常触发，导致无法加载更多数据。

解决方案

为了确保在所有设备上都能正常工作，我们可以结合 Intersection Observer 和传统的滚动事件监听来实现加载更多数据的功能。这样可以确保在某些设备上 Intersection Observer 可能不可靠的情况下，仍然可以通过滚动事件来触发加载更多数据。

实现步骤

使用 Intersection Observer 监听滚动到底部 ： Intersection Observer 是一种现代的 API，可以用来检测元素是否进入视口。我们可以使用它来监听 .loading 元素是否进入视口，从而触发加载更多数据的操作。
使用传统的滚动事件监听：传统的滚动事件监听可以确保在 Intersection Observer 可能不可靠的情况下，仍然可以通过滚动事件来触发加载更多数据。
结合两种方法：结合 Intersection Observer 和传统的滚动事件监听，确保在所有设备上都能正常工作。

代码示例

下面是结合两种方法的代码示例：

复制代码

let observer: IntersectionObserver

const handleScroll = (e: any) => {
  const listElement = e.target
  const scrollTop = listElement.scrollTop
  const clientHeight = listElement.clientHeight
  const scrollHeight = listElement.scrollHeight

  if (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 设备之间的兼容性问题，还提高了代码的可靠性和可维护性。

（注意：仅供参考）