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

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

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

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

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

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

代码示例

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

1. let observer: IntersectionObserver
3. const handleScroll = (e: any) => {
4.   const listElement = e.target
5.   const scrollTop = listElement.scrollTop
6.   const clientHeight = listElement.clientHeight
7.   const scrollHeight = listElement.scrollHeight
9.   if (scrollTop + clientHeight >= scrollHeight - 10) {
10.     if (!isLoading.value && !isGetAll.value) {
11.       console.log('到底了')
12.       getList() // 接口返回的列表数据，按需添加即可
13.     }
14.   }
15. }
17. onMounted(() => {
18.   getList()
19.   // 使用 Intersection Observer API 监听滚动到底部
20.   observer = new IntersectionObserver(
21.     entries => {
22.       entries.forEach(entry => {
23.         if (entry.isIntersecting && !isLoading.value && !isGetAll.value) {
24.           console.log('到底了')
25.           getList()
26.         }
27.       })
28.     },
29.     {
30.       root: document.querySelector('.list'),
31.       threshold: 1.0,
32.     },
33.   )
35.   const sentinel = document.querySelector('.loading')
36.   if (sentinel) {
37.     observer.observe(sentinel)
38.   }
40.   // 监听滚动事件，分页加载数据
41.   const listElement = document.querySelector('.list')
42.   if (listElement) {
43.     listElement.addEventListener('scroll', handleScroll)
44.   }
45. })
47. onUnmounted(() => {
48.   if (observer) {
49.     observer.disconnect()
50.   }
51.   const listElement = document.querySelector('.list')
52.   if (listElement) {
53.     listElement.removeEventListener('scroll', handleScroll)
54.   }
55. })

复制代码

css

1. .list {
2.    padding: 12px 20px 0;
3.    height: 100vh;
4.    overflow: auto;
5.    // 其他标签样式
6. }

复制代码

 结论
通过联合 Intersection Observer 和传统的滚动事件监听，我们可以确保在所有设备上都能正常工作，而且制止重复加载数据的题目。这种方法不仅解决了 iOS 和 Android 设备之间的兼容性题目，还提高了代码的可靠性和可维护性。
（注意：仅供参考）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。